3

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.

raphnguyen
  • 3,565
  • 18
  • 56
  • 74

4 Answers4

5

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>

Tank
  • 1,006
  • 7
  • 17
  • I haven't been able to get `:focus` to work properly for IE8 and it's given me plenty of headaches trying to figure it out. Thanks for the suggestion, though. – raphnguyen Jan 25 '12 at 20:08
  • That's why the doctype declaration is needed. This puts the browser into a different rendering mode. If you using transitional, then David Thomas's solution would be the best workaround. – Tank Jan 25 '12 at 20:12
  • Ah yes, I tried playing around with the doctypes and would always lose certain elements of the page. One thing would work and another would be broken, so I had to stick to transitional and go with David's suggestion. Thanks for your input. – raphnguyen Jan 25 '12 at 20:50
2

Instead of directly modifying the style attribute with the JavaScript, instead add, and remove, a class-name, and use CSS to define the class:

.newInputClass {
    border: 2px solid #003366;
}

And, in the HTML:

<input onfocus="this.className = 'newInputClass';" onblur="this.className = '';" name="attorneyName" id="attorneyName" type="text" value="John Jackson" size="50" maxlength="30">
David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • Thanks! This suggestion works perfectly. Is there a way to do this for a `select` field? – raphnguyen Jan 25 '12 at 20:07
  • I'm not sure; `select` elements are mostly rendered by the platform's OS, rather than the browser itself. Unless you use a styled-list or something to replicate the `select`, they're mostly non-styleable. Or, at least, non-reliably styleable with CSS. – David Thomas Jan 25 '12 at 20:10
  • Thanks. The `select` isn't too important, but do you know of a way to do the same with a checkbox? Right now, there will be a border around the checkbox, but the style seems to change onfocus from the default style. – raphnguyen Jan 25 '12 at 21:13
0

This is because when you are focusing out or "blurring", you are actually removing the entire style from the text box, not reverting it back to its default.

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

Set your blur statement to have the following values. You want a border-style: inset;

border-style: inset; 
border-width: 2px;

Hope this helps

Downpour046
  • 1,661
  • 9
  • 14
0

Try this:

onblur="this.style.border='none';"

or even better avoid the inline styles and swap a class as @David suggests.

Steve Robillard
  • 13,445
  • 3
  • 36
  • 32