[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 848
  • Last Modified:

Change Text Field border color on Focus

Hi,

I have a text field, I basically need to change the border color of it, when a user focuses on it. What's the simplest solution?

Regards;
Rob.
0
InteractiveMind
Asked:
InteractiveMind
  • 2
2 Solutions
 
sajuksCommented:
<input type="text" style = "borderColor:#eeeeee" onfocus="this.style.borderColor='red'" onblur="this.style.borderColor='#eeeeee'">
0
 
sajuksCommented:
actually the best way is to assign two styles and change them onfocus and on blur
http://support.microsoft.com/?kbid=278386
u need to substitute borderColor within the style sheet
<HTML>
<HEAD>
<TITLE>TEST Page 2</TITLE>
<STYLE>
.normal { background-color: #cccccc; color: #000000; }
.focus  { background-color: #ffff00; color: #000000; }

</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function toggleColor(objElement)
{
  if (objElement.className=='normal')
    objElement.className='focus';
  else
    objElement.className='normal';
}
</SCRIPT>
</HEAD>
<BODY onLoad="document.all.NAME.focus()">
<FORM method=post>
<table border="0">
  <tr>
    <td align="left">Name</td>
    <td>
      <INPUT name="NAME"
        class="normal"
        onblur="toggleColor(this)"
        onfocus="toggleColor(this)">
    </td>
  </tr>
  <tr>
    <td align="left">Address</td>
    <td>
      <TEXTAREA name="ADDRESS"
        class="normal"
        onblur="toggleColor(this)"
        onfocus="toggleColor(this)"></TEXTAREA>
    </td>
  </tr>
  <tr>
    <td colspan="2" align="center">
      <INPUT type="submit" value="Submit"
        class="normal"
        onblur="toggleColor(this)"
        onfocus="toggleColor(this)">
      <INPUT type="reset" value="Reset"
        class="normal"
        onblur="toggleColor(this)"
        onfocus="toggleColor(this)">
    </td>
  </tr>
</table>
</FORM>
</BODY>
</HTML>
               
0
 
InteractiveMindAuthor Commented:
Fantastic sajuks  :-)
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now