¿Puede un recuadro de sombreado de caja trabajar en un campo de entrada?recuadro de recuadro de sombra para el campo de entrada
jsFiddle: http://jsfiddle.net/hKTq2/
¿Puede un recuadro de sombreado de caja trabajar en un campo de entrada?recuadro de recuadro de sombra para el campo de entrada
jsFiddle: http://jsfiddle.net/hKTq2/
Sí, esto es algo que estaba trabajando el otro día, de hecho es posible.
input
{
box-shadow:inset 0 0 5px 5px #888;
background: #fff;
}
Usted sólo tiene que tener un fondo establecido que la sombra caiga sobre :)
Si es necesario agregar:
background-color:transparent;
Hola agregar este css entonces capaz de insertar sombra
.innershadow{ -moz-box-shadow: inset 0 0 5px 5px #888; -webkit-box-shadow: inset 0 0 5px 5px#888; box-shadow: inset 0 0 5px 5px #888; height:15px; background-color:transparent; height:50px}
Sólo tiene que añadir background:none;
en clase .innershadow
que podría hacer algo como esto para realizar una sombra de gotas dentro de la entrada de texto:
.innershadow {
font-size: 16px;
color: #999;
padding: 6px;
-moz-box-shadow:inset 2px 2px 5px #888;
box-shadow:inset 2px 2px 5px #888;
border: 1px solid #b8b8b8;
}
HTH,
--hennson
Mientras tanto, esto se ha convertido en un común, aunque aquí está mi "la entrada de inserción perfecta".
input {
background: #fff;
color: #525865;
border-radius: 4px;
border: 1px solid #d1d1d1;
box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.07);
font-family: inherit;
font-size: 1em;
line-height: 1.45;
outline: none;
padding: 0.6em 1.45em 0.7em;
-webkit-transition: .18s ease-out;
-moz-transition: .18s ease-out;
-o-transition: .18s ease-out;
transition: .18s ease-out;
}
input:hover {
box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.02);
}
input:focus {
color: #4b515d;
border: 1px solid #B8B6B6;
box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.01), 0px 0px 8px rgba(0, 0, 0, 0.2);
}
body {
background: #fff;
margin: 20px;
}
<input type="text" />
realmente. puede usar cualquier color según sus necesidades. –