How can I override the CSS on the input[type=text] selector without using !important?
input[type=text]{
background-color: rgb(255, 255, 255);
}
/*This doesn't work */
.bb-input{
background-color: yellow;
}
Add a comment
|
3 Answers
input.bb-input would do. The attribute selector and class selector have the same specifity. The type selector is adding additional specificity to the first selector.
1 Comment
Bxx
Perfect! just what i was looking for :)
The first selector is more specific then the second:
CSS Specifity Disclaimer: This is my blog
the class and the attribute have the same weight. The problem is that the first selector input[type="text"] also has the input element, which makes it more specific.
one way you can solve it is by renaming your second selector to
input.bb-input {
...
}
Comments
inline styling has highest priority so use inline styling
<input type="text" style="background-color: yellow;">
it will override external if no !important is used
2 Comments
Michael Benjamin
Not a great solution if the code contains 20
input tags.
Code Warrior
ya generally when 20 inputs are used. we use server side scripting to generate inputs then we can apply inline styling because we only have to write once in script @mbnyc