CODEWITHSUNDEEP
htmlcss
ghanshyam.mirani
ghanshyam.mirani

Reputation: 3101

Remove CSS class for Particular element in HTML

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 ?

Upvotes: 2

Views: 2761

Answers (4)

Niko
Niko

Reputation: 6269

you 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;
}

Upvotes: 1

scumah
scumah

Reputation: 6393

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;
}

Upvotes: 3

sandeep
sandeep

Reputation: 92843

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;
}

Upvotes: 0

PiTheNumber
PiTheNumber

Reputation: 23562

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"]

Upvotes: 0

Related Questions