onfocus per l'immissione del modulo per cambiare il colore del bordo?

Question

Sto provando ad aggiungere un bordo di colore a un campo modulo quando un utente fa clic sul campo, sono bravo in html e javascript, con un po 'di php, ma il mio css è in realtà piuttosto scadente. Il codice per il modulo ecc è sotto. Apprezzerei molto se qualcuno potesse dirigere o aiutarmi. CODICE:

<form id="search" action="http://www.bkslap.com/search/results.php" id="cse-search-box"> 
<input name="q" type="text" id="q" autocomplete="on" size="56" style="color:#ccc;" maxlength="128" id="q" 
onblur="this.value = this.value || this.defaultValue; this.style.color = '#ccc';" 
onfocus="this.value=''; this.style.color = '#9933FF';" 
value="Search" /> 
</form> 

Qualche idea?

Answer 1

Probabilmente sarebbe più pulito aggiungere e sottrarre una classe con onBlur e onFocus. Poi nella classe CSS si potrebbe avere:

.focus { 
background: yellow; 
color: #000; 
border: 1px solid red; 
} 

Controllare here per ulteriori informazioni sulle proprietà di confine. (con scuse a coloro che odiano w3schools, ma è un posto ragionevole per questo tipo di riferimento).

http://www.cssdrive.com/index.php/examples/exampleitem/focus_pseudo_class/

Answer 2

Non consiglio usando stile in linea come questo e sarebbe anche raccomandare cablaggio di eventi tramite JavaScript/jQuery ma ...

È possibile impostare il colore di sfondo con object.style.borderColor . Il colore è solo il colore del carattere.

Il markup css in stenografia è solo 'border' o in particolare se si desidera impostare il colore del bordo da CSS è 'border-color'. In javascript che si trasforma in this.style.borderColor.

Answer 3

è possibile utilizzare la pseudoclass :focus#q:focus {border:red 1px solid;} ma come si può vedere qui http://www.quirksmode.org/css/contents.html non è supportato da ie 7 e sotto. Per ottenere la compatibilità cross browser è possibile utilizzare jQuery e il seguente codice

$('#q').focus(function() { 
    $('#q').css('border','1px solid red'); 
}); 

Answer 4

Basta usare CSS per colore di contorno in questo modo:

.class { 
    outline-color:#FF0; 
} 

Answer 5

La risposta da Carl-Michael Hughes è quello che finalmente ha funzionato per me! outline-color è l'unico modo per impostare il colore "border" del focus. Grazie!