Default textbox border-style and width

Question

IE7 and FFox seem to render textboxes very slightly differently by default.

This seems to be fixed by setting their border-style and border-width css properties.

The odd thing is, it seems that out of all the options vstudios intellisense gives me, none of them match?

The closest I've found is

border-width:1px;
border-style:inset;

Edit: Trying to set the style for a textbox, they all appear to render differently in various browsers.

Answer 1

Fist of all, the border CSS property is a shorthand property for setting the individual border property values for one or more of: border-width, border-style, border-color.

The initial value of border-style is none. This means that if you change the border-width and the border-color, you will not see the border unless you change this property to something other than none or hidden.

The initial value of border-width is medium, but the specification doesn't precisely define its corresponding width. For example, my Safari browser currently display medium as a width of 3px;

The initial value of border-color is currentColor, this keyword represents the calculated value of the element's color property. It allows to make the color properties inherited by properties or child's element properties that do not inherit it by default.

That said, always keep in mind that if your defaults seems different, maybe some properties are computed from some other declarations, that is user agent declarations, user normal declarations, author normal declarations, author important declarations or user important declarations. When different properties applies to the same element, the more specific selectors will override the others and when several declarations have the same weight, origin and specificity, the latter in the source order wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

TL;DR?

The default is border: medium none currentColor; but that is valid as long as no other selector or declaration applies.

Answer 2

This is the first question/result that comes up via Google when looking for this sort of thing, so I thought I'd provide the answer I was looking for personally.

the answer is to set the style to '' or "";

If this is unclear, I am providing an example involving javascript/jquery, assuming you get that at a basic level. Naturally, the box starts off at a default. Let's assume I change it with code to be red, when someone clicks on that textbox...

$("#phoneBox").focus(function(){
       document.getElementById('telephone').style.border = '1px solid red';
       }

That will set it to red someone clicks into that textbox. Now, however, let's assume I want to set it back to normal when someone clicks away from the box

$("#phoneBox").blur(function(){
       document.getElementById('telephone').style.border = '';
       }

The box will go back to the default style, since it has no values to go off of.

In your CSS, just

border:'';

or to be thorough,

border-style:'';
border-width:'';
border-color:'';

will render the default in any browser. I hope that this makes sense/helps others.

Answer 3

Sorry, I was wrong. If you use an invalid border style, then the input box will ignore it, and it will not change.

The closest I've found is

border:inset 2px #EBE9ED;
border-right:solid 1px #CCCCCC;
border-bottom:solid 1px #CCCCCC;

But it is different than the default style in the 3 browsers

Answer 4

According to Firebug, the default style for a textbox in Firefox is

border: 2px inset #EBE9ED;

Answer 5

Maybe you will not believe me, but I try this:

<input style="border:default">

and it works in Windows Internet Explorer 8, Firefox 3.6.22 and Chrome 14.0.835

I think <input style="border:XXX"> <input style="border:XXX"> works too. The point is that if you use an invalid border style, then the input box goes back to its default border style.