Override CSS style behaviour without using !important or inline style sheet
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
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).
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
链接地址: http://www.djcxy.com/p/87782.html上一篇: 风格被重置为“无”