2013-04-22 21 views
60

Perdonami è una domanda stupida, ma ho bisogno di aiuto. Voglio cambiare il colore del bordo di TEXTAREA su fuoco. ma il mio codice non sembra funzionare correttamente.Come cambiare il colore del bordo della textarea su: focus

Si prega di visualizzare il codice su fiddle.

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

il colore hai scelto per il bordo sembra il colore predefinito .... – lologic

risposta

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

http://fiddle.jshell.net/ffS4S/3/

+2

Puoi anche modificare l'input: focus su .input: focus come stai già usando quella classe nella textarea. Ti sbarazzi del selettore in più in questo modo. – Hoshts

+0

Grazie, ho appena notato! – unkn0wn

+1

Solo curioso, compra perché i textareas hanno bisogno di 'outline: none' ma i normali input di testo non lo fanno? –

10

C'è un ingresso: attenzione in quanto v'è una textarea: concentrarsi

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

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 vuoi lo stesso effetto su entrambi i tipi di elementi. – Hitesh

Problemi correlati