tamaño - CSS/HTML: crea un borde brillante alrededor de un campo de entrada

input sin borde bootstrap

Question

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:

Tampoco sé muy bien cómo crear las esquinas redondeadas.

Answer 1

¿Qué tal algo así ... http://jsfiddle.net/UnsungHero97/Qwpq4/1207/

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 */

}

Answer 2

A continuación se muestra el código que usa Bootstrap. Los colores son un poco diferentes, pero el concepto es el mismo. Esto es si estás usando LESS 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 LESS, entonces 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);
}

Answer 3

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)

Answer 4

Es mejor que utilices Twitter Bootstrap, que contiene todas estas cosas bonitas dentro. Particularmente aquí es exactamente lo que quieres.

Además, puede usar diferentes temas creados para Twitter Bootstrap desde este sitio web.

Answer 5

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

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;
}

Answer 6

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

Answer 7

Use un border azul normal, un border-radius medio y una box-shadow azul con la posición 0 0 .

Answer 8

Versión modificada con una versión poco 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;  
}

Answer 9

jsfiddle 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;  
}​

Answer 10

$(''.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>

Answer 11

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;
}