Border style and default text box width

Question

IE7 and FFox seem to display text fields differently in different ways.

This seems to be fixed by setting css properties for borders and width borders.

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

The closest I found

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

Edit: trying to set the style for the text box, they all look different in different browsers.

Answer 1

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

 border: 2px inset #EBE9ED; 

Answer 2

This is the first question / result that appears through Google when searching for these kinds of things, so I thought I would provide the answer that I personally searched for.

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

If this is unclear, I provide an example with javascript / jquery, assuming you get this at a basic level. Naturally, the window starts by default. Suppose I change it with a red code when someone clicks on this text box ...

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

This will cause someone to click in this text box. Now, however, suppose I want to return it to its normal state when someone clicks on a window

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

The box will revert to the default style, as it has no values ​​to disconnect.

In your CSS, just

 border:''; 

or be careful

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

will display the default value in any browser. I hope this makes sense / helps others.

Answer 3

You may not believe me, but I try this:

 <input style="border:default"> 

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

I think that <input style="border:XXX"> <input style="border:XXX"> works too. The fact is that if you use an invalid border style, then the input field returns to the default border style.

Answer 4

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

The initial border-style value is none . This means that if you change border-width and 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 does not exactly determine its corresponding width. For example, my Safari browser currently displays medium as 3px wide;

The initial value of border-color is currentColor , this keyword is the computed value of the element's color property. This allows you to make color properties inherited by properties or properties of child elements that do not inherit by default.

However, always keep in mind that if your default values ​​seem different, it’s possible that some properties are calculated from some other declarations, i.e. user agent declarations, regular user declarations, regular author declarations, important declarations or important announcements for the user. If different properties are applied to the same element, more specific selectors will override the others, and when several ads have the same weight, origin and specificity, the latter wins in the original order. Declarations in imported style sheets are counted before any declarations in the style sheet itself.

TL ;? DR

The default is border: medium none currentColor; but this is true unless another selector or declaration is used.

Answer 5

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

The closest I found

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

But it is different from the default style in three browsers