8

I have created on css file for input type styling, by which, i am changing the style of input type textbox, and that i have used in my whole web page. But, now i got one problem, i want that, a particular input type, shouldn't be affected by my created css file. In short, i want css exception, for particular input type. So that... input styling remain same and not be effected by css styling.Any idea, how to achieve this. Idea will be appreciated !!!

this is the code of my css file

input
{
color:#000000;
font-size:14px;
border:#666666 solid 2px;
height:24px;
margin-bottom:10px;
width:200px;


}
textarea
{
color:#000000;
font-size:14px;
border:#666666 solid 2px;
height:124px;
margin-bottom:10px;
    width:200px;

}

and i want that, it should not be applied on this

<input type="image" src="images/loginbutton.png" style="width:80px;height:40px" />
Improve this question
0

5 Answers 5

Reset to default
25

The following selector will help you in CSS3 to exclude the image type:

input:not([type="image"])

If you don't want to rely on CSS3 - you probably don't, because of browser compatibility - you should change your initial selectors to be more specific like so:

input[type="text"], input[type="password"]

Edit: More in-depth explanation seems needed

The reason this will work, is because it won't specifically exclude any input types, but you will be only including the types that you do want to target.

So instead of saying I have a, b and c and I want to exclude b. You can say I want to only target a and c.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

What inputs do you want to target with your input selector? Just make a list with all the types and change your selector to that (like illustrated in my answer).
0

If you don't care about IE 8 and lower, you can use :not(). Otherwise you will need to either override all the styles you are applying for the image input or find some other way to make the selector more specific (such as adding a class to each input).

Improve this answer

Comments

0

This might be too obvious to suggest, but could you put an id on the textarea that you don't want the style applied to? Then give this element it's own style?

Otherwise, you could try using a more specific set of descendant selectors to target that particular element.

Improve this answer

Comments

0

You could give the input you DON'T want styled a class="nostyle", then define, in CSS ...

.nostyle {
    margin: 0;
    border: 0;
    }

... or whatever you'd like non-styled inputs to be.

Improve this answer

1 Comment

input[type="image"] is not img.
0

There are ways to do what you ask, but I would recommend not doing this. I would recommend making all of your styled elements (Including inputs, etc have actual classes in the CSS rather than just for the input. This way you can easily make items not have a class or have a different class.

I understand this does not answer your question but hopefully this will help you and if you do change it, as much as it's hassle to write more CSS, it's better in the long run, possibly something like this:

input.normal {
    color:#000000;
    font-size:14px;
    border:#666666 solid 2px;
    height:24px;
    margin-bottom:10px;
    width:200px;
}


input.alternate {
   something:here;
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.