Cómo cambiar el color del borde del área de texto en: focus

113

Perdóname, es una pregunta estúpida, pero necesito ayuda. Quiero cambiar el color del borde de TEXTAREA en foco. pero mi código no parece funcionar correctamente.

Por favor vea el código en el violín .

<form name = "myform" method = "post" action="insert.php"  onsubmit="return validateform()" style="width:40%">
        <input type="text" placeholder="Enter Name." name="name" maxlength="300" class="input">
        <input type="email" placeholder="Enter E-mail." name="address" maxlength="300" class="input">
        <textarea placeholder="Enter Message." name="descrip" class="input" ></textarea>    
<br>
<input class="button secondary" type=submit name="submit" value="Submit" >
</form>

Aquí está el CSS

.input {
border:0; 
padding:10px; 
font-size:1.3em; 
font-family:"Ubuntu Light","Ubuntu","Ubuntu Mono","Segoe Print","Segoe UI";
color:#ccc; 
border:solid 1px #ccc; 
margin:0 0 20px; 
width:300px;
-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2); 
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2); 
box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
border-radius: 3px;

}
input:focus { 
    outline: none !important;
    border-color: #719ECE;
    box-shadow: 0 0 10px #719ECE;
}
html css Mercurial
fuente
el color que eligió para el borde parece el color predeterminado ...
lologic

Respuestas:

239 
.input:focus {
    outline: none !important;
    border:1px solid red;
    box-shadow: 0 0 10px #719ECE;
}
a la deriva
fuente
2
También puede cambiar input: focus a .input: focus ya que ya está usando esa clase en el área de texto. De esa manera te deshaces del selector adicional.
Anfitriones
1
Solo por curiosidad, ¿por qué las áreas de texto necesitan outline: nonepero las entradas normales de cuadro de texto no?
Justin Skiles
Creo que es mejor usar el contorno y la sombra juntos "contorno: sólido 2px # 8dc63f; cuadro-sombra: 0 0 21px # 8dc63f;" :-)
BG BRUNO
1
Este enlace de violín no existe.
Arpan Jain
20

Hay una entrada: enfoque como hay un área de texto: enfoque

input:focus { 
    outline: none !important;
    border-color: #719ECE;
    box-shadow: 0 0 10px #719ECE;
}
textarea:focus { 
    outline: none !important;
    border-color: #719ECE;
    box-shadow: 0 0 10px #719ECE;
}
Philip Sumesgutner
fuente
11
Ambas reglas se pueden combinar de la siguiente manera: input:focus, textarea:focus { outline: none !important; border-color: #719ECE; box-shadow: 0 0 10px #719ECE; }si desea el mismo efecto en ambos tipos de elementos.
Hitesh
8

Probablemente, una forma más apropiada de cambiar el color del contorno es usar la outline-colorregla CSS.

textarea {
  outline-color: #719ECE;
}

o para entrada

input {
  outline-color: #719ECE;
}

box-shadow no es exactamente lo mismo y puede verse diferente al contorno, especialmente si aplica un estilo personalizado a su elemento.

Grgur
fuente
1
Sí, pero ¿no es el contorno un rectángulo? No es bueno si está diseñando los botones / entrada con radio de borde.
Joseph Kreifels II
1
El esquema es lo que utilizan los navegadores para resaltar los campos enfocados para la accesibilidad. Recomendaría ceñirse a él siempre que sea posible. Obviamente, puede crear soluciones alternativas si su diseño es muy específico :)
Grgur
2

tan sencillo :

 outline-color : blue !important;

todo el CSS para mi botón react-boostrap es:

.custom-btn {
    font-size:1.9em;
    background: #2f5bff;
    border: 2px solid #78e4ff;
    border-radius: 3px;
    padding: 50px 70px;
    outline-color : blue !important;
    text-transform: uppercase;
    user-select: auto;
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
    -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
Farbod Aprin
fuente
0

solo necesitas en scss varible

$input-btn-focus-width:       .05rem !default;
Vahid Alvandi
fuente