HTML input onfocus and onblur

html input onblur onfocus
raphnguyen picture raphnguyen · Jan 25, 2012 · Viewed 7.7k times · Source

I am trying to get an input text field to have a thick blue border around it when it is in focus and then to default back to its normal default border when it is no longer in focus. One of my input fields is defined like so:

<input onfocus="this.style.border='2px solid #003366';" onblur="this.style.border='';" name="attorneyName" id="attorneyName" type="text" value="John Jackson" size="50" maxlength="30">

This correctly puts a blue border around it when it is on focus, but when it is no longer in focus, it loses the default text field altogether. None of the input text field borders are defined; their style is the default style for such fields and I would simply like to make it revert to this style after it loses focus.

Answer

Tank picture Tank · Jan 25, 2012

css has a :focus psuedo selector which you can attach styles to.

input:focus { border:2px solid #036; }

Also, don't forget to use the right doctype. <!DOCTYPE html>

Related questions

Set the value of an input field

How would you set the default value of a form <input> text field in JavaScript?

Read More
Is there any way to change input type="date" format?

I'm working with HTML5 elements on my webpage. By default input type="date" shows date as YYYY-MM-DD. The question is, is it possible to change its format to something like: DD-MM-YYYY?

Read More
How to get current formatted date dd/mm/yyyy in Javascript and append it to an input

I would like to add a current date to a hidden HTML tag so that it can be sent to the server: <input type="hidden" id="DATE" name="DATE" value="WOULD_LIKE_TO_ADD_DATE_HERE"> How can …

Read More