I have the following style for an input box
input[type="text"] {
height: 16px ;
font-size: 14 ;
border-radius: 5px ;
}
What I want to do is have this style on most of the inputs but I want to make a class of input so I can add background color, etc. How can I do this in the style sheet?
Use classes
Define a class with the different style and apply it to the input element in the HTML:
input[type="text"] {
height: 16px ;
font-size: 14 ;
border-radius: 5px ;
}
input[type="text"].different {
background-color: #d6eaf8;
}
<input type="text" class="different" />
This input will have all the properties of the generic rule input[type="text"]
and then apply all the properties of input[type="text"].different
class.
The input[type="text"].different
is more important so in case of overlapping properties the ones in the .different
class will prevail.
Read https://developer.mozilla.org/en-US/docs/CSS/Class_selectors and https://developer.mozilla.org/en-US/docs/CSS/Specificity