Search code examples
htmlcss

Input boxes with different styles on the same page

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?

Solution

  • 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