0

This may be a trivial question to answer, but is there an equivalent to input { border: initial; } that works in IE8 & 9?

I would be fine with nested boxes with explicit borders just to get the default IE look if anyone knows what the colours are (since they can be overridden with initial in other browsers to clear them).

Things I've tried already: 2px inset #XXX with various values for X; 2px inset threedhighlight; -ms-initial

1 Answer 1

1

No. And initial doesn’t mean “browser default”. It means the defined initial value for the property, as per CSS specs, irrespective of browser defaults. For border, it is thin none followed by the value of the color property. (The initial value is supported by Chrome, but not e.g. by Firefox or IE 9.)

You can try to explicitly set a property to a value that you expect to be a browser default, though this often varies by browser version. The page http://www.iecss.com is described as showing IE default style sheet features. According to it, the following is applied in IE 6:

background-color: #FFF;
border-style: inset;
border-width: 2px;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
padding: 1px;
zoom: 1;

For IE 7 thru IE 9, the page has the same declarations, except for border-style, which is missing. This is impossible since the initial value is none. Maybe the intent is to say the border style is not describable in CSS. But to me, it really looks inset.

To keep some properties of some elements to their browser defaults, just don’t set them in CSS. Use selectors that exclude them when needed. This may require added markup at times.

6
  • I wish to keep stylesheet requests to a minimum (currently 1 for non-IE browsers), and am also currently not using IE-only CSS hacks, and do not wish to start doing so just for this. Thus far I have managed just by overriding everything in IE specific stylesheets within conditional comments. To avoid setting the border I would need to add a second stylesheet to all page loads, hidden from IE by conditional comments, which only sets the button border. Nov 13, 2012 at 11:19
  • @Nicholas, you have not described the problem you are trying to solve, just some complications of what you are now doing to deal with some unspecified problems. Why don’t you just set the properties you want to set? Original IE style for input isn’t so great that you should work hard to achieve it, especially since it varies by IE version (and Windows version). Nov 13, 2012 at 11:29
  • style for button is set in CSS. for certain buttons I don't want the style to change from the UA's default (so that it looks familiar to the user). something like button:not(classes to exclude) {...} that works in UAs that don't support :not(). I perhaps naïvely thought that button {border:custom-look} button.revert-to-UA-default {border:initial;} would suffice. Nov 14, 2012 at 16:27
  • @Nicholas, you can’t do it that way. You need to take the positive approach. E.g., use extra markup so that all buttons that you wish to style are inside an element in class foo, and then put the styling that should apply to them inside .foo input { ... }. The only way to ensure that an element appears in browser-default style is that you do not style it at all. Nov 14, 2012 at 17:32
  • the irony is that either border:initial or key words like buttonface work just as I had imagined they would in all browsers except IE, I thought I was just missing something. Oh well. Nov 15, 2012 at 8:48

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.