I have defined Css class
form input[type="text"], form input[type="email"], form input[type="password"], form select, form textarea {
background: url("../images/input-bg.gif") repeat-x scroll 0 0 #FFFFFF;
border: 1px solid #CCCCCC;
padding: 4px 5px;
}
now when i use Input in html css affects to all input on the form because i have used [form] in the css. but i do not want to affect css to some input texboxes..
how can i achive this ?
I'd do it the other way, just add other classes to inputs you don't want to be affected by that rule. Something like this.
Edited adding comment suggestion
/* General rule for inputs */
form input[type="text"], form input[type="email"], form input[type="password"], form select, form textarea {
background: url("../images/input-bg.gif") repeat-x scroll 0 0 #FFFFFF;
border: 1px solid #CCCCCC;
padding: 4px 5px;
}
/* Specific rule for inputs */
form input[type="text"].reset-inputs, form input[type="email"].reset-inputs, form input[type="password"].reset-inputs, form textarea.reset-inputs, form select.reset-inputs {
background: none;
border: none;
padding: 0;
}
form input.reset-inputs and then it'll be specific enough to over-ride the one above it.
form input.reset-inputs, form textarea.reset-inputs, form select.reset-inputs would do it because class selectors far outweigh attribute selectors. w3.org/TR/selectors/#specificityyou can add a class for the input boxes you dont want an effect and override the other one:
<input class="noeffect"/>
form input.noeffect {
background: none !important;
}
background: none !important; in order to override. Adding the class, alone, will not be enough as the effect is applied to form input.Add a class to the input felds you like to affect:
html: <input class="here" ... />
css: form input.here[type="text"]
Or create a div region with your input's in it:
<div class="here">
<input /><input /><input />
</div>
css: form .here input[type="text"]
There are several properties like :nth-child() :last-child, :first-child etc:
Like this:
form input[type="text"] + form input[type="text"] {
background:none;
}
or
form input[type="text"]:nth-child(2n){
background:none;
}
or
give a class to it
form input.diff{
background:none;
}
