0

So someone has applied the following style:

select, input[type="text"], input[type="password"] {
    border: 1px solid #999999 !important;
}

Why they've done it this way I will never know. But now I have a requirement to remove the border above, i.e. go back to the standard browser specific textbox borders but only in a few places. I know, I know, it'll look weird but I'm doing what I'm told.

What CSS will revert the border set above?

I've tried

border:;
border:auto;

Neither work!

Just to clarify, I can't just remove the css style. I need to override it, if possible!

Liam
  • 27,717
  • 28
  • 128
  • 190
  • This might be of some help: http://stackoverflow.com/questions/10199141/overriding-css-properties-that-dont-have-default-values – ajp15243 Feb 21 '13 at 16:13

2 Answers2

1

Any reason why you can't just delete the line of code like user2063626 suggests?

If not just do this:

select, input[type="text"], input[type="password"] {
    border: none !important;
}

Edit:

Add a :not to your css selector so it doesn't select the input you want to be left alone.

select:not(#yourinput), input[type="text"]:not(#yourinput), input[type="password"]:not(#yourinput) {
    border: 1px solid #999999 !important;
}

Edit2:

You're best option is to either add a class, or use a more specific selector (#div select instead of just select). That way the css only targets the ones you want it to, and not affecting any new ones you may add.

Or, if it would be easier, just add a class, or use a more specific selector on the select that you don't want to have the styles, then apply the default styles to it.

You can find the default styles at mozilla.org just search for select.

Kolby
  • 2,775
  • 3
  • 25
  • 44
  • No, thats not right, that'll give me no border. I want the **default** border. I can't becuase it's used in other places in the form and all over the site. I just wnat to override it in one place in one form – Liam Feb 21 '13 at 16:05
  • You could add a not selector so it doesn't include the border on the input you want to be set to default. – Kolby Feb 21 '13 at 16:06
  • Beautiful, everyday's a school day not seen a :not before! – Liam Feb 21 '13 at 16:22
  • Maybe this will be helpful to you http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/ – Kolby Feb 21 '13 at 19:21
  • Just found out this is CSS3, which is a pain as I need to support IE7+ (oh well good idea just not going to work): http://kilianvalkhof.com/2008/css-xhtml/the-css3-not-selector/ – Liam Feb 27 '13 at 09:57
0

Just add the below class to your css and put to input which you dont want have border.

input.noBorder{
      border: 0 !important;
}
  • I can't do this becuase it's used in other places in the form and all over the site. I just wnat to override it in one place in one form – Liam Feb 21 '13 at 16:05