If the css is as below:
input[type="text"]
{
border: 1px solid green;
}
.text
{
border: 1px solid red ;
}
And if the html is as below:
<div>
<input type="text" class="text"/>
</div>
The border-color of the textbox is green.
It seems that the "element" has the higher priority.
How to make the .class valid? Is it a must to use the !important?
Any other choices?
I tested below CSS code:
input[type="text"]
{
border: 1px solid green;
}
input[type="text"] .text
{
border: 1px solid red;
}
HTML code:
<div>
<input type="text" class="text"/>
</div>
Guess what?
Still Green.
Remove the space in 'input[type="text"] .text'
it becomes input[type="text"].text .
That's ok. The border color is red.
The C in CSS stands for cascading. You just need to give it higher precedence then the other rule.
input.text
{
border: 1px solid red ;
}
/* Set default border for `text` elements */
.text
{
border: 1px solid red;
}
/* Override for input elements */
input.text
{
border: 1px solid green;
}
Styles are applied in sequence, but also must follow specificity rules. The .text is less specific than input[type="text"], so the green border "wins." If you make the red border rule more specific, you can get the results you seem to be expecting.
Try something like input.text and see what happens. If that doesn't do it, you'll have to get even more specific.
It's a matter of weight of your selectors.
With
`input[type="text"]
You are passing both input and [type=text] as selector, so you're passing a total of two.
With
.text
You are passing only one. This translates in less weight and less specificity, so the first selector wins over the second.
By adding input before (i.e. input.text) you're adding more weight to second style, which will prevail as you'd expect from Cascading Style Sheets.
Specificity is easily visualized through websites like Specificity Calculator.
Related
I have issue with border-color. It didn't work. I'm new to css here is the fiddle.
http://jsfiddle.net/zeburrehman/aFzKy/151/
<div id="box">
Hello! The color of box border should be red!!
</div>
#box {
border-color: red;
}
By default the border-width is 0 and border-style is none
So you need to set them to border-width:1px and border-style:solid. You can combine all the border properties into one as below:
#box {
border:1px solid red
}
I had an issue where it seemed that border-color was not being respected, confusingly it even showed having the right color in the style inspector in Chrome (possibly a Chrome bug). The key thing for me was that if the shorthand border style is specified, it sets all three aspects of the border style, regardless of if they are included or not so:
border-left: 1px;
Actually overwrites both the border-left-style and border-left-color properties even though they weren't included. This can for example cause an inherited style to be overridden and appear not to work.
#box{
border:3px solid #aacfac;
}
I hope this helps!
You need to add the border style:
#box {
border: 1px solid red;
}
You can use hex color code for red as well, which is #ff0000 (RGB). 100% Red, 0% Green and 0% Blue if you want pure red color.
#box {
border: 2px solid #ff0000;
}
Try this :
border: 5px solid red;
I have an anchor element that I want to draw a border around when the cursor hovers over it. The problem is that the anchor text and everything to its right "jumps" slightly to the right when the border is drawn.
I thought I'd be clever and style the anchor with a border of the background color (via "inherit") so that a default border is drawn when there is no hover. Then, when the user hovers, the red border is simply drawn over the background border and the text should not jump to the right. But this approach does not work.
The main reason I am posting is to understand why my strategy of using the inherited color to draw the border does not work. In other words, why is it that a border of the inherited color is not drawn? Secondarily, I would like to know how to prevent the text from jumping.
Here are the styles and a JSFiddle: https://jsfiddle.net/tlbaxter99/zoLr4m8j/6/
a:link, a:visited {
border: 1px solid inherit;
}
a:hover {
border: 1px solid red;
}
The main reason I am posting is to understand why my strategy of using the inherited color to draw the border does not work. In other words, why is it that a border of the inherited color is not drawn?
It's not working because 1px solid inherit is an invalid value:
According to MDN, you can't use the inherit value as part of a shorthand declaration (like in your case). Here is the relevant, in-depth quote:
Only the individual properties values can inherit. As missing values are replaced by their initial value, it is impossible to allow inheritance of individual properties by omitting them. The keyword inherit can be applied to a property, but only as a whole, not as a keyword for one value or another. That means that the only way to make some specific value to be inherited is to use the longhand property with the keyword inherit.
Which means that you would need to use the longhand border-color property in order to inherit the border-color value:
Example Here
a:link,
a:visited {
border: 1px solid;
border-color: inherit;
}
Secondarily, I would like to know how to prevent the text from jumping.
If you don't want the inherited border color, simply use a transparent border to displace the added border:
Example Here
a {
border: 1px solid transparent;
}
a:hover {
border: 1px solid red;
}
Alternatively, rather than using a border, you could also use the outline property to add an outline to the element that doesn't affect the element's box model:
Updated Example
a:hover {
outline: 1px solid red;
}
You need to tell the initial position about the border too. So initially, give transparent border, giving the space.
body {
padding: 1em;
}
a:link,
a:visited {
border: 1px solid transparent;
}
a:hover {
border: 1px solid red;
}
<p>
Hello This is a link and here is more text, <b>which doesn't move</b>.
</p>
Now it dares not to move. :) The reason why inherit doesn't work is, none would be the inherited value and it causes border to be 0px. (I am not sure, but that's what is compiled.)
instead of using inherit , try
transparent
Then your css class will look like the one below
a:link, a:visited {
border: 1px solid transparent;
}
This will make sure the border space is already taken and when you hover it doesn't hurt
Styled my checkboxes like buttons as suggested here in this article:
CSS: styled a checkbox to look like a button, is there a hover?
Now I've been trying to add some margin to the buttons. This won't work, as soon as the button is selected, only the area without margin is highlighted. This looks awfull...
#ck-button label span {
text-align:center;
padding:3px 0px;
display:block;
margin: 10px;
}
See here: http://jsfiddle.net/Vq759/
Anyone know how to solve this?
Thanks mates :)
I think you're overcomplicating things with your HTML/CSS, here's a quick re-do with how I'd style a checkbox (which is completely customizable to suit anything you need).
Simple HTML:
<input type="checkbox" value="1">
<label>Red</label>
I start styling the checkbox by simply hiding it:
input[type="checkbox"] {
display: none;
}
This leaves optional events/states like :checked intact.
From here I style the entire object to suit my needs, for example:
input[type="checkbox"] + label {
display:inline-block; /* or block */
line-height:normal;
cursor:pointer;
padding: 3px 14px;
background-color: #EFEFEF;
border-radius: 4px;
border: 1px solid #D0D0D0;
margin: 40px 100px 10px 40px; /* however you please */
}
/* hover event */
input[type="checkbox"] + label:hover {
border-color: #000;
background-color: #911;
color: #fff;
}
/* checked checkbox */
input[type="checkbox"]:checked + label {
border-color: #000;
background-color: #888;
color: #fff;
}
Margin works flawlessly.
Fiddle: http://jsfiddle.net/8e5Xa/
If you are trying to make the button essentially bigger and still make the whole thing highlight onClick, use padding instead of margin:
#ck-button label span
{
padding: 10px;
}
Margin puts white-space around an element. Padding puts white-space within an element.
JSFiddle
The + operator in this selector:
#ck-button input:checked + span
.. does not function properly in older browsers. It sort of works, but has bugs when doing the kind of thing you're trying to do here (in particular, changing the :checked state of the adjacent element). Sorry, but what you're trying to do is impossible if you want all browsers to be supported.
You will need to use JavaScript if you want the text colour of the span to change when selected in all browsers.
Alternatively, you could pick a colour scheme where it looks OK if the span doesn't change colour, but do change the colour in browsers that support it.
If it changing the margin of the button, do this:
#ck-button {
margin:40px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
float:left;
}
Also have a look at this:
This is the box-model for every HTML element
I have this CSS:
html.darkBlue .btn1 button:hover:not(.nohover) {
background: #0007d5;
border: 1px solid #0007d5;
color: white;
}
I am rather confused about disabled. How can I make it so that this CSS does not work if the button is disabled?
If you don't need to support IE < 9 you could use the :enabled pseudo class.
html.darkBlue .btn1 button:hover:enabled {
background: #0007d5;
border: 1px solid #0007d5;
color: white;
}
Try with (demo http://jsfiddle.net/JDNLk/)
HTML
<button class="btn1" disabled="disabled">disabled</button>
<button class="btn1">enabled</button>
CSS
html.darkBlue .btn1 button:hover:not([enabled="enabled"]) {
background: #0007d5;
border: 1px solid #0007d5;
color: white;
}
You can use the negation pseudo class selector (CSS 3). I am not sure if there is also a solution using attribute selectors (CSS 2.1).
Given this html
<div class="darkBlue">
<h2>disable hover for disabled buttons</h2>
<div class="btn2">
<button>hover enabled</button> <br/>
<button disabled="disabled">hover disabled</button>
</div>
</div>
and this css
.darkBlue .btn2 button:hover:not([disabled="disabled"]) {
background: #0007d5;
border: 1px solid #0007d5;
color: white;
}
you can achive that every button inside the matiching selector has no hover-style applied.
See this example.
At caniuse.com you can find tables that compare which browser supports which selector
browser support for css2 selectors
browser support for css3 selectors
Update using a hack to be able to use css2 selectors
This is a hack and is yet not exactly the same but in case you are restricted to css 2.1 this may be a starting point. If you define a seperate style-rule for disabled buttons and use the color that you picked for disabled buttons you can fake a disabled hover-style:
.btn3 button[disabled="disabled"]:hover
{
background-color: rgb(212, 208, 200);
color: rgb(128, 128, 128);
}
It worked for me after adding the ":enabled" selector as following :
element-class:hover:enabled {
properties...
}
Use the CSS :Not attribute selector to only target elements that don't have the disabled attribute.
html.darkBlue .btn1 button:not([disabled]):hover
That way your hover style will only be applied to buttons that are not disabled.
.btn:disabled:hover{color:default-color;background:default prop}
. or .btn:disabled{pointer-events:none}
Im trying to do a simple :focus effect for all my INPUT elements, like so:
INPUT:focus { border-color: orange; }
This works great, until I add this bit of CSS to the style sheet:
.form_container .col2 INPUT
{
border: 2px solid #CCCCCC;
margin:0px 0px 0px 0px;
font-family:arial;
font-size:14px;
padding:3px;
}
Now once I add the above, the focus effect doesnt work on any input within the form_container class, when I take the above out it works.
I can get the effect to work by specifying the class for the INPUT like so:
.form_container .col2 INPUT:focus { border-color: orange; }
But I dont understand why I have to do this? I want to control all INPUT effects like i do in the first example
if any one can shed some light on this
thx
That's because
.form_container .col2 INPUT
is more specific than
INPUT:focus
In CSS, more specific rules have higher priority, no matter what the order is in which they were declared. Rules that are equally specific (the same number of selectors usually), the rule declared later overrides or adds to rule declared first.
You could specify !important on your border style for the second rule, but it's not supported in all browsers (did I hear IE?)
In your first rule you're declaring the border color. In your second rule you're overriding it. You could try something like
INPUT:focus { border-color: orange!important; }