onfocus para la entrada de formulario para cambiar el color del borde?

Question

Estoy tratando de agregar un borde de color a un campo de formulario cuando un usuario hace clic en el campo, soy bueno en html y javascript, con un poco de php, pero mi CSS es bastante pobre. El código para el formulario, etc. está debajo. Realmente apreciaría si alguien pudiera dirigirme o ayudarme. CÓDIGO:

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

¿Alguna idea?

Answer 1

Probablemente sería más limpio sumar y restar una clase con onBlur y onFocus. Luego, en la clase CSS que podría tener:

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

Comprobar here para obtener más información sobre las propiedades del borde. (con disculpas a quienes odian w3schools, pero es un lugar razonable para este tipo de referencia).

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

Answer 2

No recomiendo el uso de estilo en línea como esta y incluso recomendaría cableando los eventos a través de Javascript/jQuery pero ...

Puede establecer el color de fondo con object.style.borderColor . El color es solo el color de la fuente.

La marca css en forma abreviada es solo 'borde' o específicamente si desea establecer el color del borde de css es 'color de borde'. En javascript que se convierte en this.style.borderColor.

Answer 3

puede usar el pseudoclasto :focus#q:focus {border:red 1px solid;}, pero como puede ver aquí http://www.quirksmode.org/css/contents.html no es compatible con, por ejemplo, 7 y siguientes. Para lograr la compatibilidad entre navegadores puede utilizar jQuery y el siguiente código

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

Answer 4

Sólo tiene que utilizar CSS para el color de contorno de esta manera:

.class { 
    outline-color:#FF0; 
} 

Answer 5

La respuesta de Carl-Michael Hughes es lo que finalmente funcionó para mí! el color de contorno es la única forma de establecer el color de "borde" de enfoque. ¡Gracias!