CSS / HTML: crea un borde brillante alrededor de un campo de entrada

171

Quiero crear algunas entradas decentes para mi formulario, y realmente me gustaría saber cómo TWITTER hace su borde brillante alrededor de sus entradas.

Ejemplo / imagen del borde de Twitter:

ingrese la descripción de la imagen aquí

Tampoco sé cómo crear las esquinas redondeadas.

html css input border glow Hans
fuente
77
Aquí hay un tutorial que le enseña cómo: Efectos de brillo CSS con box-shadow
Ciudad
El enlace de @Town parece ser disfuncional: bucle de redireccionamiento.
JeroldHaas

Respuestas:

415

Aqui tienes:

.glowing-border {
    border: 2px solid #dadada;
    border-radius: 7px;
}

.glowing-border:focus { 
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}

Demostración en vivo: http://jsfiddle.net/simevidas/CXUpm/1/show/

(para ver el código de la demostración, elimine "show /" de la URL)

label { 
    display:block;
    margin:20px;
    width:420px;
    overflow:auto;
    font-family:sans-serif;
    font-size:20px;
    color:#444;
    text-shadow:0 0 2px #ddd;
    padding:20px 10px 10px 0;
}

input {
    float:right;
    width:200px;
    border:2px solid #dadada;
    border-radius:7px;
    font-size:20px;
    padding:5px;
    margin-top:-10px;    
}

input:focus { 
    outline:none;
    border-color:#9ecaed;
    box-shadow:0 0 10px #9ecaed;
}
<label> Aktuelles Passwort: <input type="password"> </label>
<label> Neues Passwort: <input type="password"> </label>
Expandir fragmento

Šime Vidas
fuente
44
¿Cómo puedo animar el brillo?
3lvis
17
@NSElvis, por ejemplo, transition: box-shadow linear 1s jsfiddle.net/simevidas/6LyWe/1
Šime Vidas
Muy agradable. Una cosa, si solo quiere que esto se aplique a los campos de entrada de texto, querrá restringir el selector: input [type = text]: focus, input [type = password], input [type = textarea].
Michael Kennedy
1
@MichaelKennedy En aplicaciones del mundo real, eso no sería suficiente. El enfoque estándar sería clases, por ejemplo .glowing-input { … }.
Šime Vidas
Claro, mi punto era que se aplicaba a botones de radio, botones de envío, etc. que podrían no ser deseados.
Michael Kennedy el
30

¿Qué tal algo como esto ... http://jsfiddle.net/UnsungHero97/Qwpq4/1207/

ingrese la descripción de la imagen aquí

CSS

input {
    border: 1px solid #4195fc; /* some kind of blue border */

    /* other CSS styles */

    /* round the corners */
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;


    /* make it glow! */
    -webkit-box-shadow: 0px 0px 4px #4195fc;
       -moz-box-shadow: 0px 0px 4px #4195fc;
            box-shadow: 0px 0px 4px #4195fc; /* some variation of blue for the shadow */

}
Hristo
fuente
1
Esto no es
fácil de entrar
1
¿Y qué? la respuesta aceptada no facilita la entrada y salida. la pregunta original (y mi respuesta) se publicó en 2011, y estoy bastante seguro de que los brillantes bordes de Twitter tampoco se abrían y cerraban. Además, la pregunta no se centra en la facilidad de entrada, sino en cómo hacer que el borde brille con esquinas redondeadas, lo que he respondido. No creo que debas rechazarme solo porque no hay salida fácil
Hristo
6

Use un azul normal border, un medio border-radiusy un azul box-shadowcon posición 0 0.

SLaks
fuente
3

Las fallas golpean el clavo en la cabeza, pero es posible que desee ver los cambios para las entradas en CSS3 en general. Las esquinas redondeadas y el recuadro de sombra son características nuevas en CSS3 y le permitirán hacer exactamente lo que está buscando. Uno de mis enlaces favoritos personales para CSS3 / HTML5 es http://diveintohtml5.ep.io/ .

DaOgre
fuente
2

Combiné dos de las respuestas anteriores ( jsfiddle ).

input {
    /* round the corners */
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;    
}

input:focus { 
    outline:none;
    border: 1px solid #4195fc; 
    /* create a BIG glow */
    box-shadow: 0px 0px 14px #4195fc; 
    -moz-box-shadow: 0px 0px 14px #4195fc;
    -webkit-box-shadow: 0px 0px 14px #4195fc;  
}​
usuario1218947
fuente
2

Versión modificada con una versión poco menos brillante.

input {
    /* round the corners */
    //background-color: transparent;
    border: 1px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;    
}

input:focus { 
    outline:none;
    border: 1px solid #4195fc; 
    /* create a BIG glow */
    box-shadow: 0px 0px 5px #4195fc; 
    -moz-box-shadow: 0px 0px 5px #4195fc;
    -webkit-box-shadow: 0px 0px 5px #4195fc;  
}
Shabbir Hussain
fuente
0 
input[type="text"]{
   @include transition(all 0.30s ease-in-out);
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
input[type="text"]:focus{
  @include box-shadow(0 0 5px rgba(81, 203, 238, 1));
  -webkit-box-shadow: 0px 0px 5px #007eff;  
  -moz-box-shadow: 0px 0px 5px #007eff;  
  box-shadow: 0px 0px 5px #007eff;
}
Shadi Omar
fuente
0

A continuación se muestra el código que utiliza Bootstrap. Los colores son un poco diferentes pero el concepto es el mismo. Esto es si está utilizando MENOS para compilar CSS:

// Form control focus state
//
// Generate a customized focus state and for any input with the specified color,
// which defaults to the `@input-focus-border` variable.
//
// We highly encourage you to not customize the default value, but instead use
// this to tweak colors on an as-needed basis. This aesthetic change is based on
// WebKit's default styles, but applicable to a wider range of browsers. Its
// usability and accessibility should be taken into account with any change.
//
// Example usage: change the default blue border and shadow to white for better
// contrast against a dark gray background.

.form-control-focus(@color: @input-border-focus) {
  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
  &:focus {
    border-color: @color;
    outline: 0;
    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
  }
}

Si no está utilizando MENOS, aquí está la versión compilada:

.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
Shital Shah
fuente
0

Esto creará campos de entrada brillantes y áreas de texto:

textarea,textarea:focus,input,input:focus{
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    border: 1px solid #c4c4c4;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0px 0px 8px #d9d9d9;
    -moz-box-shadow: 0px 0px 8px #d9d9d9;
    -webkit-box-shadow: 0px 0px 8px #d9d9d9;
}

input:focus,textarea:focus { 
    outline: none;
    border: 1px solid #7bc1f7;
    box-shadow: 0px 0px 8px #7bc1f7;
    -moz-box-shadow: 0px 0px 8px #7bc1f7;
    -webkit-box-shadow: 0px 0px 8px #7bc1f7;
}
rubo77
fuente
0 

$('.form-fild input,.form-fild textarea').focus(function() {
    $(this).parent().addClass('open');
});

$('.form-fild input,.form-fild textarea').blur(function() {
    $(this).parent().removeClass('open');
});
.open {
  color:red;   
}
.form-fild {
	position: relative;
	margin: 30px 0;
}
.form-fild label {
	position: absolute;
	top: 5px;
	left: 10px;
	padding:5px;
}

.form-fild.open label {
	top: -25px;
	left: 10px;
	/*background: #ffffff;*/
}
.form-fild input[type="text"] {
	padding-left: 80px;
}
.form-fild textarea {
	padding-left: 80px;
}
.form-fild.open textarea, 
.form-fild.open input[type="text"] {
	padding-left: 10px;
}
textarea,
input[type="text"] {
	padding: 10px;
	width: 100%;
}
textarea,
input,
.form-fild.open label,
.form-fild label {
	-webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	<div class="row">
    	<form>
        <div class="form-fild">
            <label>Name :</label>
            <input type="text">
        </div>
        <div class="form-fild">
            <label>Email :</label>
            <input type="text">
        </div>
        <div class="form-fild">
            <label>Number :</label>
            <input type="text">
        </div>
        <div class="form-fild">
            <label>Message :</label>
            <textarea cols="10" rows="5"></textarea>
        </div>
    </form>
    </div>
</div>
Expandir fragmento

Dhaval Patel
fuente