Ancho y estilo de borde de cuadro de texto predeterminados

Question

IE7 y FFox parecen representar cuadros de texto de forma muy diferente por defecto.

Esto parece corregirse estableciendo sus propiedades de borde y ancho de borde css.

Lo curioso es que parece que de todas las opciones que me ofrece vstudios intellisense, ¿ninguna de ellas concuerda?

Lo más cerca que he encontrado es

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

Editar: Tratar de establecer el estilo de un cuadro de texto, todos parecen hacer de manera diferente en distintos navegadores.

Answer 1

De acuerdo con Firebug, el estilo predeterminado de un cuadro de texto en Firefox es

border: 2px inset #EBE9ED; 

Answer 2

Tal vez usted no me va a creer, pero yo intente esto:

<input style="border:default"> 

y funciona en Windows Internet Explorer 8, Firefox 3.6.22 y Chrome 14.0.835

Creo que <input style="border:XXX"> <input style="border:XXX"> funciona también. El punto es que si usa un estilo de borde no válido, el cuadro de entrada vuelve a su estilo de borde predeterminado.

Answer 3

Lo siento, estaba equivocado. Si usa un estilo de borde no válido, el cuadro de entrada lo ignorará y no cambiará.

Lo más cerca que he encontrado es

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

pero es diferente que el estilo por defecto en los navegadores 3

Answer 4

Ésta es la primera pregunta/resultado que surge a través de Google cuando se busca para este más o menos, así que pensé en proporcionar la respuesta que buscaba personalmente.

la respuesta es establecer el estilo en '' o "";

Si no está claro, proporciono un ejemplo que implica javascript/jquery, suponiendo que lo obtenga en un nivel básico. Naturalmente, la caja comienza de manera predeterminada. Vamos a suponer que lo cambio con el código a ser de color rojo, cuando alguien hace clic en ese cuadro de texto ...

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

que fijará a otra roja que encaje en su campo respectivo. Ahora, sin embargo, vamos a suponer que quiero fijarlo de nuevo a la normalidad cuando alguien hace clic fuera de la caja

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

La caja se dirige de nuevo al estilo por defecto, ya que no tiene ningún valor para ir fuera de.

En tu CSS, simplemente

border:''; 

o de ser exhaustivo,

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

hará que el defecto en cualquier navegador. Espero que esto tenga sentido/ayude a otros.

Answer 5

Puño de todos, la propiedad CSS border es una propiedad abreviada para establecer los valores individuales de propiedad de frontera para una o más de: border-width, border-style, border-color.

El valor inicial de border-style es none. Esto significa que si cambia border-width y border-color, no verá el borde a menos que cambie esta propiedad a algo que no sea none o hidden.

El valor inicial de border-width es medium, pero la especificación no define con precisión su ancho correspondiente. Por ejemplo, mi navegador Safari actualmente muestra medium como un ancho de 3px;

El valor inicial de border-color es , esta palabra clave representa el valor calculado de la propiedad de color del elemento. Permite hacer que las propiedades de color heredadas por propiedades o propiedades de elementos secundarios que no lo hereden de manera predeterminada.

Dicho esto, siempre tener en cuenta que si sus valores por defecto parece diferente, tal vez algunas propiedades se calculan a partir de algunas otras declaraciones, es decir declaraciones de agente de usuario, declaraciones normales de usuario, declaraciones normales de autor, autor declaraciones importantes o usuarios importantes declaraciones. Cuando diferentes propiedades se aplican al mismo elemento, los selectores más específicos prevalecerán sobre los otros y cuando varias declaraciones tienen el mismo peso, origen y especificidad, esta última en el orden de origen gana. Las declaraciones en hojas de estilo importadas se consideran antes de cualquier declaración en la propia hoja de estilo.

TL; DR?

El valor predeterminado es border: medium none currentColor;, pero es válido siempre que no se aplique ningún otro selector o declaración.