CODEWITHSUNDEEP
csscss-selectors
Thomas.Benz
Thomas.Benz

Reputation: 8599

Override global type-selector class

My application has different form pages. Most of text box elements on those forms share the same global css rule such as width property (150px), font-family, font-size, and so on. So, I make a global css type selector class for most of those text boxes. However, there some text boxes on those forms need another value of the width property (smaller or wider). How can I override such global type for particular text boxes?

The following is my global type-selector class for most of form text boxes:

input[type=text]{
   width: 150px;
   font-family: verdana,
   font-size: 12px;
   ...
}

Thank you in advance.

Upvotes: 2

Views: 2454

Answers (1)

Curtis
Curtis

Reputation: 103358

Create a class for those particular textboxes, and apply styles to that class:

<input type="text" class="short" />

input[type=text]
{
   width: 150px;
   font-family: verdana,
   font-size: 12px;
   ...
}

input[type=text].short
{
   width: 90px;
   ...
}

This textbox will then use the following styles:

width: 90px;
font-family: verdana,
font-size: 12px;

Alternatively if an entire form needs these different styles, set the selector for a parent element:

<div class="shortform">
   <input type="text" />
</div>

input[type=text]
{
   width: 150px;
   font-family: verdana,
   font-size: 12px;
   ...
}

.shortform input[type=text]
{
   width: 90px;
   ...
}

Upvotes: 4

Related Questions