Estilo como el GMAIL

[JaimeBCN]

Me gustaría saber como se hace igual que pasa en el momento de "Crear Nuevo Tema" o en el GMAIL a la hora de poner usuario y password, que cuando el foco está en input se marque el cuadro de texto en amarillo, y cuando pierdes el foco, desaparece esta marca amarilla.

[emiliodeg]

ah de ser algo asi

input:focus{border:1px solid yellow}

esto no te va a andar en IE, y vas a tener q corregirlo con JS

[JaimeBCN]

Y para que funcione en Explorer que hago????

[dark_nexus]

esto puede resolver el problema
http://www.htmldog.com/articles/suckerfish/

[dark_nexus]

aqui para el focus
http://www.htmldog.com/articles/suckerfish/focus/

y aqui puedes ver los ejemplos
http://www.htmldog.com/articles/suck...focus/example/

[JaimeBCN]

es lo que estaba buscando, lo probaré a ver que tal funciona, gracias por todo

[dark_nexus]

de nada...xD

[JaimeBCN]

Ha ido, pero he estado probando para que el efecto no me lo coja cuando uso un input de type que sea diferente a "TEXT".

En la parte de javascript, poniendo despues del for esto :

if (sfEls[i].type != "submit")

Y una parte la soluciono.

Pero me gustaría que el boton no me coja el estilo del css que si lo coge.

Paso ficheros:

css
input {
width: 15em;
border: 2px solid;
border-color: #666 #ddd #ddd #666;
}

input:focus, input.sffocus{
background: #93a3c9;
border-color: #003366;
}

js.
<!--//--><![CDATA[//><!--

sfFocus = function() {
var sfEls = document.getElementsByTagName("INPUT");
for (var i = 0; i < sfEls.length; i++)
{

if (sfEls[i].type != "submit")
{
sfEls[i].onfocus=function()
{
this.className+=" sffocus";
}
sfEls[i].onblur=function()
{
this.className=this.className.replace(new RegExp(" sffocus\\b"), "");
}
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfFocus);

//--><!]]>

[JaimeBCN]

Nadie me puede ayudar?

[jomaruro]

Hola:

Si el problema lo tienes con el javascript, pienso que te podrían ayudar mejor en el foro de javascript.

Saludos.

[JaimeBCN]

He preguntado en el foro de javascript, y sin motivo ninguno, me han borrado la entrada, por lo tanto nadie me puede ayudar.

[foreverOdd]

No tendrias ningun problema si utilizas un framework de javascript que soporte css3, con jQuery por ejemplo, para hacer lo que quieres todo se reduciaria a :

Código css:

jQuery("#id_input:focus").css({border:"1px solid yellow"});
 

Saludos

[JaimeBCN]

Mi entorno de trabajo es JAVA, sería válido lo que me comentas.

[foreverOdd]

JAVA o JavaScript???????
Son dos lenguajes distintos.

Lo que te puse es javascript. Necesitas descargar la libreria jquery e incluirla en la pagina donde necesitas el efecto.

Suerte

[JaimeBCN]

Trabajo en entornos JAVA pero en las JSP a veces inserto funciones de javascript, lo que pasa es que nunca he usado JQUERY, por lo tanto no sé como se implementa.

[foreverOdd]

1.- Lo descargas Aqui

2.- Lo incluyes en tu pagina <script type="text/javascript" src="ruta/al/jquery.js">

3.- Lo usas jQuery("#id_input:focus").css({border:"1px solid yellow"});

[JaimeBCN]

El paso tres que se tiene que poner en un tag de script al estilo :
<script>
jQuery("#id_input:focus").css({border:"1px solid yellow"});
</script>

O por lo contrario, en algun evento del tag input.

<input type="text" ... >

Donde pongo los tres puntos es donde se usa algun evento?

Saludos y Gracias
Jaime