onclick / onblur sobre input text

humanista · #1 (**permalink**) 27/07/2012, 02:44

Hola, tengo esto:

Código PHP:

  <input type="text" onfocus="this.style.borderColor='#000000'" onblur="this.style.borderColor='#F5F5F5'">

como véis, lo que pretendo es que cuando el foco esté en el campo input, se "ilumine" el borde de negro, pero, cuando pierda el foco se quede como está.

El problema es ese "se quede como está". Tal cual lo tengo me genera una especie de sobra en el campo input pero yo quiero que vuelva a estar como al principio, sin sombra ni nada.

Cómo se podría hacer?

locomian · #2 (**permalink**) 27/07/2012, 05:02

Si es que se puede, prueba llamar a otro input cuando estes sobre ese

furoya · #3 (**permalink**) 27/07/2012, 08:35

A mí tu código no me hace ninguna sombra (¿porque quisiste poner "sombra", verdad?).

Sí me aparece en algún navegador cuando está activo, pero eso depende de cada uno, lo puedes desactivar con CSS.

Código:

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

Te diría que pongas una captura para ver qué es eso que te aparece al quitar el foco.
Pero no estoy seguro...

humanista · #4 (**permalink**) 29/07/2012, 05:06

Pues como me seguía saliendo la sombra, lo he solucionado con esto:

Código HTML:

Ver originalonblur="this.style.borderColor='#7F9DB9'; this.style.border='1px solid #7F9DB9'"

furoya · #5 (**permalink**) 29/07/2012, 11:07

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