Come cambiare il colore del bordo della textarea su: focus

115

Perdonami è una domanda stupida, ma ho bisogno di aiuto. Voglio cambiare il colore del bordo di TEXTAREA in primo piano. ma il mio codice non sembra funzionare correttamente.

Si prega di visualizzare il codice sul violino .

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

Ecco il 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

— mutevole
fonte

il colore che hai scelto per il bordo assomiglia al colore predefinito ....

— lologic

240

.input:focus {
    outline: none !important;
    border:1px solid red;
    box-shadow: 0 0 10px #719ECE;
}

— alla deriva
fonte

2

Puoi anche cambiare input: focus in .input: focus dato che stai già usando quella classe nell'area di testo. In questo modo ti sbarazzi del selettore extra.

— Hoshts

1

Solo curioso, compra perché le aree di outline: nonetesto hanno bisogno ma i normali input di casella di testo no?

— Justin Skiles

Penso che sia meglio usare contorno e ombra insieme "outline: solid 2px # 8dc63f; box-shadow: 0 0 21px # 8dc63f;" :-)

— BG BRUNO

1

Questo collegamento violino non esiste.

— Arpan Jain

22

C'è un input: focus in quanto c'è un textarea: focus

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
fonte

11

Entrambe le regole possono essere combinate come segue:

input:focus, textarea:focus {      outline: none !important;     border-color: #719ECE;     box-shadow: 0 0 10px #719ECE; }

se si desidera lo stesso effetto su entrambi i tipi di elementi.

— Hitesh

8

Probabilmente un modo più appropriato per cambiare il colore del contorno è usare la outline-colorregola CSS.

textarea {
  outline-color: #719ECE;
}

o per input

input {
  outline-color: #719ECE;
}

box-shadow non è esattamente la stessa cosa e potrebbe avere un aspetto diverso dal contorno, soprattutto se applichi uno stile personalizzato al tuo elemento.

— Grgur
fonte

1

Sì, ma il contorno non è un rettangolo? Non va bene se stai disegnando i pulsanti / input con border-radius.

— Joseph Kreifels II

1

Lo schema è ciò che i browser utilizzano per evidenziare i campi mirati per l'accessibilità. Consiglierei di seguirlo ogni volta che è possibile. Ovviamente, sei libero di creare soluzioni alternative se il tuo design è molto specifico :)

— Grgur

3

così semplice :

 outline-color : blue !important;

l'intero CSS per il mio pulsante React-Boostrap è:

.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
fonte

0

hai bisogno solo in scss varible

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

— Vahid Alvandi
fonte