0

I have set a global CSS to text type inputs. Eg: 

input[type=text] {
padding:10px;
width:100px;
//and many more
}

Now, I am using a plugin colorpicker on a particular div. This plugin draws some input elements for color hex inputs, and sets its own CSS properties.

.colorpicker input {
width:25px;
}

But the already set CSS properties interfere with the newly set CSS. Is there a way that I can reset these inputs and not let them use any of the previous CSS properties? I don't know what all properties are being set from behind, like border, may be border-shadow, padding, etc. I want to reset all of them and create a fresh input type. I am willing to do that by Javascript/jQuery if needed. Please help me out. Thanks!

EDIT: Suppose if something like $('.colorpicker input').resetCSS(); exists, that removes all the CSS properties from the input, it would be great! Exactly what I need.

Pulkit Mittal
  • 5,916
  • 5
  • 21
  • 28
  • Try to apply your styles inline. Every other style get overridden by inline styles. – SachinGutte Nov 19 '12 at 07:34
  • A particular style can be overriden, but the situation here is that I don't even know what all properties are being set from behind. – Pulkit Mittal Nov 19 '12 at 07:35
  • Did you inspect input element? Can you make a fiddle and state what styles you want and what being set ? – SachinGutte Nov 19 '12 at 07:37
  • I know there are bunch of CSS rules being applied from behind. I have seen them in inspect element. If I want, I can manually reset every propery, but I want to do this a more generic way. Suppose if something like `$('.colorpicker input').resetCSS();` exists, that removes all the CSS properties from the input, it would be great. – Pulkit Mittal Nov 19 '12 at 07:39
  • which colorpicker plugin you are using? – SachinGutte Nov 19 '12 at 07:43
  • This http://www.eyecon.ro/colorpicker/ – Pulkit Mittal Nov 19 '12 at 07:52

3 Answers3

0

If you don't have too many text inputs on your page, just use a class name instead of a global definition. Neater in the long run, IMO. That way, your input fields stay yours, other plugin's input fields stay with their respective classes.

Felix Guo
  • 2,700
  • 14
  • 20
  • I am actually using bootstrap CSS, which is being used for the whole project. I need to assign those CSS to all the input types in the project. – Pulkit Mittal Nov 19 '12 at 07:41
  • If you don't need old IE support, there is a CSS3 `not:` selector that exists, so just make it `input[type=text]:not(.colorpicker)` and it should work. – Felix Guo Nov 19 '12 at 07:49
  • Well I thought about it, but I do want old IE support, 7 minimum. – Pulkit Mittal Nov 19 '12 at 07:53
  • As far as I know, the only way to do that would be to reset all the values previously set. Technically, it won't really be much if you think about it. Just margin, padding, border, alignment and font. http://meyerweb.com/eric/tools/css/reset/ – Felix Guo Nov 19 '12 at 08:09
0

depends on your code, but you could use the css3 :not selector.

div:not(.colorpicker) input[type=text]

of course this assumes you have all your inputs wrapped in divs. http://jsfiddle.net/kudoslabs/aDJeT/

Kudos
  • 375
  • 4
  • 14
0

You can use .not() selector. Try this fiddle. As it's jquery selector it should support older browsers also. But in this case also, you need to edit your bootstrap css and create a class that contain styles you want to apply to all other text fields.

SachinGutte
  • 6,947
  • 5
  • 35
  • 58