CSS text box management asp

Question

I have an ASP text box. When the user focuses on the text field, I want to change the background color of the text field from gray to white.

here is the css file, but it does not change color after focusing on the text field.

<script language="javascript" type="text-javascript"> function DoFocus(txt) { txt.className = 'focus'; } </script> 

Textbox

  <asp:TextBox ID="txtFirstName" runat="server" CssClass="textbox" MaxLength="50" Width="188px" onfocus="DoFocus(this)"> 

CSS

 input.textbox, select, textarea { font-family : verdana, arial, snas-serif; font-size : 11px; color : #000000; padding : 3px; background : #f0f0f0; border-left : solid 1px #c1c1c1; border-top : solid 1px #cfcfcf; border-right : solid 1px #cfcfcf; border-bottom : solid 1px #6f6f6f; } input.textbox:focus, input.input_text_focus { border-color:#646464; background-color:#ffcf03; } 

Answer 1

EDIT: I saw that you updated your post, so please clarify: ASP creates an HTML input element (correct me if I am wrong) and you can always create it with :focus selector in CSS, there is no need for Javascript, but also add input.textbox:active to catch some IE buggy ...

 input.textbox:focus, input.textbox:active { /* everything you put here will be aplied to ANY focused input element */ } 

---

Judging by your inserted code instead

 .input_text:focus, input.input_text_focus { border-color:#646464; background-color:#ffffc0; } 

using

 input.textbox:focus, input.input_text_focus { ... } 

Or why do you suddenly use the input_text class when you have input.textbox by hand? Your two selectors do not match ...

Answer 2

Here's an approach using split CSS classes specified through javascript:

 <style type="text/css"> input.FocusedStyle { background-color:#ffffc0; border-color:#646464; } </style> <script type="text/javascript"> function OnBlur(textBox) { textBox.className = ''; } function OnFocus(textBox) { textBox.className += ' FocusedStyle'; } </script> <asp:TextBox ID="txt" runat="server" onblur="OnBlur(this);" onfocus="OnFocus(this);"></asp:TextBox> 

Answer 3

  TEXTAREA, INPUT[type="text"] { font-family : tahoma, arial, snas-serif; font-size : 11px; color : #000000; padding : 3px; background : #EEEfff; border-left : solid 1px #c1c1c1; border-top : solid 1px #cfcfcf; border-right : solid 1px #cfcfcf; border-bottom : solid 1px #6f6f6f; } INPUT[type="text"]:focus, INPUT[type="text"]:active { border-color:#646464; background-color:#ffcf03; } 

Answer 4

You cannot do this simply using css. You should also use javascript. For instance:

 <asp:TextBox runat="server" id="myTextbox" onfocus="DoFocus(this)" onblur="DoBlur(this)"></asp:TextBox> 

javascript section:

 <script language="javascript" type="text/javascript"> function DoFocus(txt) { txt.className = 'focus'; } function DoBlur(txt) { txt.className = 'unfocus'; } </script> 

and css:

 input.textbox, select, textarea, unfocus { font-family : verdana, arial, snas-serif; font-size : 11px; color : #000000; padding : 3px; background : #f0f0f0; border-left : solid 1px #c1c1c1; border-top : solid 1px #cfcfcf; border-right : solid 1px #cfcfcf; border-bottom : solid 1px #6f6f6f; } .focus { border-color:#646464; background-color:#ffffc0; } 

You can find some good examples:
http://www.codeproject.com/KB/aspnet/inputBgOnFocus.aspx
http://viralpatel.net/blogs/2009/09/change-form-input-textbox-style-focus-jquery.html
http://forums.asp.net/t/1134964.aspx/1