Given this HTML that declares the tags-input directive:
<tags-input class="bootstrap" ng-model="selected">
<auto-complete source="getList($query)"></auto-complete>
</tags-input>
This CSS doesn't change the border to blue:
.bootstrap .tags {
border: 1px solid blue;
}
This CSS doesn't change the border to red when ngTagsInput gets the focus
.bootstrap .tags:focused {
border-color: red;
}
If you see the HTML when tags-input is in focus, it applies a focused class when the input is focused. We can utilize that class to override our CSS.
I put the following CSS and it works for me:
.bootstrap .tags{
border: 2px solid blue;
}
.bootstrap .tags.focused {
border: 2px solid red;
}
And, what you tried to do in question (:focused) is not a pseudo-class, :focus is! :)
Here's the sample working plunker
Related
I have a link that looks like this:
Документи
And problem is that in Safari when "Документи" is underlined, letter "Д" and "у" cut line and there is small white space in link line.
How to remove these white gaps in link?
Remove the underline for all <a> elements
In CSS you could do:
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
Remove the underline for only Cyrillic class
Or alternatively for only Cyrillic links:
a.cyrillic {
text-decoration:none;
}
a.cyrillic:hover {
text-decoration:none;
}
Here's a JSFiddle to clarify.
This removes the underline from the link. It's by no means perfect (if you wanted to retain the underline) but it at least solves the issue by removing it entirely. Of course, this assumes that your links are coloured somehow
border-bottom underline
It is possible to get the result you want using the CSS border-bottom style as such:
a.cyrillic {
border-bottom: 1px solid currentColor;
text-decoration: none;
}
a.cyrillic:hover {
border-bottom: 1px solid currentColor;
text-decoration: none;
}
And obviously on your HTML <a> element it should be:
Документи
Here's another JSFiddle to clarify.
I have a paper-droopdown-menu that displays normally. But I would like to change the backgroud colour as shown in the graphic below
I have tried the following but it did not affect the background.
* /deep/ paper-dropdown-menu::shadow #menu {
background-color: #eee;
border: 1px solid #ccc;
}
paper-dropdown-menu {
background-color: red;
}
or just the input element
paper-dropdown-menu::shadow #control {
background-color: red;
}
If this isn't what you want, can you please add the HTML to your question that produces the layout you have in your screenshot.
Is there a way to set only the top border for an element through Pixate? I don't see it in the docs.
I've tried both of these, but they apply the border to all four sides:
#footer {
border-top:5px solid #FF0000;
}
#footer {
border:5px solid #FF0000;
border-width:5px 0px 0px 0px;
}
PLEASE NOTE: I am talking about Pixate here, NOT browser CSS!
You can't apply a border to a single side, no.
But there is a workaround:
#footer {
box-shadow:inset 0px 1px 0px solid #FF0000;
}
That should create the same effect. Good luck. :)
I am using Rails 3.1 and want to have a Sass variable (or other technique) where I can set
$show_border: border: 1px solid black;
and in layout pieces
.info{
$show_border
width: 600px;
display:inline-block;
float:left;
}
So that I can see layouts and turn it on and off centrally. I can't just set border to 0 as that will not work cross browser. Is there a simple way to do this?
thx
You can do it as a mixin, if you want:
#mixin show_border {
border: 1px solid black;
}
.info {
#include show_border;
}
Or you can do it in JavaScript (i.e. from a bookmarklet):
$(".info").css({ border: "1px solid black" }); // with jQuery
// Without jQuery (in modern browsers)
Array.prototype.slice.call(document.getElementsByClassName("info"), 0).forEach(function (element) {
element.style.border = "1px solid black";
});
let's i have the following code http://jsfiddle.net/QhJWt/
<span contentEditable="true">asdfasdf </span>
span
{
height:20px;
width:100px;
border: 1px solid black;
}
how can i emulate textbox behavior? i.e. when text longer then span width it doesnt resizing.
Add display:block to your span element, because inline elements ignore width and height properties. Then, add word-wrap: break-word;, to get the desired behavior.
Also, change height to min-height, so that the element resizes when necessary.Fiddle: http://jsfiddle.net/QhJWt/1/
span
{
min-height:20px;
width:100px;
display: block;
border: 1px solid black;
word-wrap: break-word;
}
It's simple actually:
span
{
height:20px;
width:100px;
border: 1px solid black;
display:block;
overflow:hidden;
}