¿Hay alguna manera de agregar un brillo alrededor del div? Observe el inicio de sesión de Twitter y cómo hay un resplandor azul alrededor del cuadro de entrada, ¿se puede hacer eso para el div?brillar alrededor de div con borde y color
Aquí está el código completo con el estilo de un div exactamente igual que la entrada de datos Entra. Los estilos para el borde azul son los estilos box-shadow y border para el selector div[contenteditable]:focus. Live demo here (click).
de marcado:
<div contenteditable="true">Username or email</div>
CSS:
div[contenteditable]:focus {
border: 1px solid rgb(86, 180, 239);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);
}
div[contenteditable] {
width: 97%;
max-width: 280px;
margin-right: 10px;
font-family: Arial,sans-serif;
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.075);
box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.075);
display: inline-block;
padding: 4px;
margin: 0;
outline: 0;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 13px;
line-height: 20px;
}
CSS3 puede hacer que
-webkit-box-shadow:0 0 20px blue;
-moz-box-shadow: 0 0 20px blue;
box-shadow:0 0 20px blue;
Trabajando JSFiddle.
no lo muestra – DemCodeLines
Ah, está bien. Bueno ... déjame ver si puedo establecerte un JSFiddle. Esto funciona para mi. –
¿Qué navegador no le muestra? Aquí hay un ejemplo. http://jsfiddle.net/ryancowles/zs7XN/ – Ryan
También se enfrentará algún problema con Internet Explorer al tratar este problema. IE-9 Cómo siempre apoya box-shadow, pero las versiones anteriores no, pregunte here para hacer que funcione en todas las versiones de IE
Como se muestra anteriormente, el uso de CSS: focus, border y box-shadow.
Si usa IE, asegúrese de que <doctype> esté especificado.
.text:focus {
border: 1px solid #07c;
box-shadow: 0 0 10px #07c;
}
posible duplicado de [Campo de texto "brillante" efecto como las páginas de inicio de sesión de Twitter y Tumblr?] (Http://stackoverflow.com/questions/9455460/text-field-glowing-effect-like-twitter-and-tumblr-login-pages) – thirtydot