在不使用！important或内联样式表的情况下覆盖CSS样式行为

Question

i am facing issue of css override. below css are applied on textbox(with class xdTextBox )

          .xdTextBox   {
            padding:1px;
            line-height:10px; 
            border:2px #cc0 solid;              

}

     input[type="text"]  {
          padding:10px;
          margin:10px;
          line-height:15px; 
          border:none;

}

I want Result as textbox with padding:1px, line-height:10px, border:2px #cc0 solid;

I can't use !important or inline stylesheet

is it possible ? please suggest your solution

Thanks in advance

Answer 1

The general idea of making something more prioritized is to add more specific selectors to it.

HTML:

<input type="text" class="xdTextBox" name="exmapleInput" />

CSS:

input[type="text"].xdTextBox {
    padding:1px;
    line-height:10px; 
    border:2px #cc0 solid;    
}

For further reading: Reviewing CSS style priority

Answer 2

A class selector has a lower specifity than a tag and attribute selector - see Calculating a selector's specificity

You still have several options to overwrite the browsers default styles - one has @Itay already posted.

As always your selector needs a higher specifity or if it is equal it has to come after in the stylesheet (which automatically is the fact in case of browser default styles).

And just one word concerning your desired styles: What font-size will you use that you set the line-height to 10px!? Anyway, always set the font-size and the line-height as an unitless value (multiplyer for the font-size).