Ver Mensaje Individual
  #5 (permalink)  
Antiguo 29/07/2012, 11:07
furoya
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años, 1 mes
Puntos: 317
Respuesta: onclick / onblur sobre input text

Pues con tu ejemplo yo sigo viendo la sombra en Chrome.

Claro que si usas otro navegador (y dependiendo de la configuración o los themes que le hayan instalado) esa "sombra" no existe. Pero aparecen otros formatos ... que si no sabes nada de CSS, puede que las llames "sombra". Aunque son los mismos formatos del input.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<style type="text/css">
input {width: 50%; margin: 15px; font-size: 120%; }
</style>
</head>
<body>
<input type="text" value="Común y silvestre"><br>

<input type="text" style="-webkit-appearance: none;" value="Con -webkit-appearance: none"><br>

<input type="text" style="-moz-appearance: none;" value="Con -moz-appearance: none"><br>

<input type="text" style="-ms-appearance: none;" value="Con -ms-appearance: none"><br>

<input type="text" style="-o-appearance: none;" value="Con -o-appearance: none"><br>

<input type="text" style="appearance: none;" value="Con appearance: none"><br>

<input type="text" onfocus="this.style.borderColor='#000000'" 
onblur="this.style.borderColor='#F5F5F5'" style="outline:none" 
value="Con mi ejemplo"><br>

<input type="text" style="-webkit-appearance: none; -moz-appearance: none; 
-ms-appearance: none; -o-appearance: none; outline:none" 
onfocus="this.style.borderColor='#000000'" 
onblur="this.style.borderColor='#F5F5F5'" 
value="Con mi ejemplo y reset de apariencia"><br>

<input type="text" 
onblur="this.style.borderColor='#7F9DB9'; this.style.border='1px solid #7F9DB9'" 
value="Con tu ejemplo"><br>

<input type="text" style="-webkit-appearance: none; -moz-appearance: none; 
-ms-appearance: none; -o-appearance: none;" 
onblur="this.style.borderColor='#7F9DB9'; this.style.border='1px solid #7F9DB9'" 
value="Con tu ejemplo y reset de apariencia">
</body>
</html>
Allí hay algunos estilos para probar y jugar en los distintos navegadores. (En FF ya me imagino a qué llamas "sombra", y por qué mi código "no te funcionó").

En el foro y la web hay mucha información sobre bordes de input.


Quitar borde del cuadro de texto de un formulario