[SOLUCIONADO] box-shadow en input type text Ghorome no funciona.

cristo995 · #1 (**permalink**) 18/03/2013, 15:21

Buenos dias para todos . e aqui yo con el siguiente problemilla:

no me funciona el box-shadow en los input type text en chorome ni en Explorer

tengo el siguiente codigo como ejemplo:

<html>
<head>
<style type="text/css">
.efecto{
position:relative;
-webkit-box-shadow:0 0px 4px #777;
-moz-box-shadow:0 0px 4px #777;
box-shadow:0 0px 10px #777;
width:80px;
height:80px;
border-color:1px solid blue;
}
#efecto:focus{
position:relative;
-webkit-box-shadow:0 0px 4px #777;
-moz-box-shadow:0 0px 4px #777;
box-shadow:0 0px 10px #777;
}
</style>
</head>
<body>
<div class="efecto"> </div>div
<input type="text" id="efecto">
</body>
</html>

-Me va de 100% en Mozilla y Opera

pero en Chorome y Internet Explorer Nada..

no funciona el "focus"

agradeceria vuestra ayuda y mas que todo me interesa que sirva en Chorome
aunque no entiendo se supone que con el :

-webkit- box-shadow me deberia ir todo bn pero en estos navegadores NO :(

falconeta8 · #2 (**permalink**) 18/03/2013, 15:36

Prueba

Código CSS:

Ver original.elemento {
 -webkit-box-shadow: 2px 2px 5px #999;
 -moz-box-shadow: 2px 2px 5px #999;
 filter: progid:DXImageTransform.Microsoft.Shadow(color='#666666', Direction=135, Strength=4);
 }

Fuente: http://www.psdahtmlpasoapaso.com/blo...os-navegadores .

pzin · #3 (**permalink**) 18/03/2013, 15:36

Añade alguna declaración para el borde. Por ejemplo:

Código CSS:

Ver originalborder: none;

WebKit ya soporta box-shadow sin aditivos.

cristo995 · #4 (**permalink**) 19/03/2013, 07:12

jo jo jo jo oye muchisimas gracias ahora si funciona como dijiste con ALGUNA declaracion al borde. puse
border:none; y funciona 100%;
y tambien probe con : border 1px solid green; y funciona 100% ; . Ahora ya puedo ver las sombras en los input type text en chorome :)

Lo unico malo es que al parecer Chorome colorea los border por defaul de un color como amarillito al tener el foco (focus): ejem
-buscador google
-formularios con input type text

pero bueno esto se dicimula un 70% con un color de border : border: 1px solid green : :)

repito muchisimas gracias..

pzin · #5 (**permalink**) 19/03/2013, 07:33

Es Chrome. Chorome suena a embutido.

Para quitar lo que añade Chrome por defecto, puedes quitar el outline al elemento:

Código CSS:

Ver originalinput {
  outline: 0;
}

cristo995 · #6 (**permalink**) 19/03/2013, 09:57