Geek Answers Handbook

Defining CSS exception for input type

I created a css file for the input type of the type with which I change the style of the input text box and use it throughout the web page. But now I have one problem, I want my created css file not to depend on a specific input type. In short, I want a css exception for a particular input type. So ... the input style remains the same and css styling will not be performed. Any idea how to achieve this. The 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 this not to be applied to this

 <input type="image" src="images/loginbutton.png" style="width:80px;height:40px" />
+4
source share
5 answers

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 won't, due to browser compatibility - you should change your initial selectors to be more specific:

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

Edit: More explanation needed

The reason this will work is because it will not specifically exclude any input types, but you will only include the types that you want to configure.

Therefore, instead of saying that I have a, b and c, and I want to exclude b. You can say that I want to focus only on a and c.

+15
source

You can specify the input that you DO NOT want to style class = "nostil", and then define in CSS ...

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

... or whatever you would like to use is not in style.

0
source

If you don't care about IE 8 and below, you can use :not() . Otherwise, you will need to either redefine all the styles used to input the image, or find another way to make the selector more specific (for example, add a class to each input).

0
source

This may be too obvious to suggest, but can you put the identifier in a text box in which you don't want to apply a style? Then give your style a style?

Otherwise, you can try using a more specific set of child selectors to target this particular element.

0
source

There are ways to do what you ask, but I would recommend not to do this. I would recommend making all of your stylized elements (including input, etc. that have actual classes in CSS, not just for input. So you can easily make elements not have a class or have another class.

I understand that this does not answer your question, but I hope this helps you, and if you change it, since it is a hassle to write more CSS, it is better in the long run, maybe 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; }
0
source

More articles:


All Articles