CSS of a asp textbox control

Question

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

here is the css file, but its not changing the color after focusing on the text box.

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

Michael Rose · Accepted Answer · 2011-04-10 08:26:26Z

7

EDIT: I saw you updated your post, so to clarify: ASP creates an input HTML element (correct me if I'm wrong) and you can always style this via the :focus selector in CSS, no need for Javascript, but also add input.textbox:active to catch some buggy IE...

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

Judging from your pasted code, instead of

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

use

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

Or why do you suddenly use the class input_text when you have input.textbox in the firsthand? Your two selectors don't match...

edited Apr 10, 2011 at 8:26

answered Apr 10, 2011 at 7:56

Michael Rose

7,8203 gold badges24 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user478636 Over a year ago

just one thing i wanted to ask, why does highlighting work when i add the style manually to the aspx page, and not the stylesheet?

Michael Rose Over a year ago

This might be that there are other styles comming from some other stylesheet... try using background-color: #ffffc0 !important;...

user478636 Over a year ago

well i have just referenced just 1 stylesheet in my page. i only am using 1 in my project

Michael Rose Over a year ago

I have not worked with ASP yet, so I can't tell you whether it does generate some default stylesheet by itself. Another thing to consider is that browsers have default stylesheets, try including a reset.css (google it ;). Inline styles (entering them directly in your page) work, because they are more "specific", you can also try adding more selectors like #content form input.textbox:focus if your form is contained in a div with id content...

Mikhail · Accepted Answer · 2011-04-10 08:15:03Z

2

Here an approach with the use separated CSS classes specified via 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>

answered Apr 10, 2011 at 8:15

Mikhail

9,3104 gold badges35 silver badges52 bronze badges

Comments

ЯegDwight · Accepted Answer · 2012-10-06 00:05:13Z

2

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

edited Oct 6, 2012 at 0:05

ЯegDwight

25.3k10 gold badges47 silver badges52 bronze badges

answered Oct 5, 2012 at 19:45

Ali

211 bronze badge

2 Comments

McGarnagle Over a year ago

Good answer for all I know, but in general you should try and leave a comment explaining what you did ... code-only answers are frowned upon.

ste2425 Over a year ago

Old i know but this is far better than using JavaScript to set focus. Using Pseudo-classes.

Kamyar · Accepted Answer · 2011-04-10 08:33:50Z

1

You cannot do it by just using css. you have to use javascript as well. For example:

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

the javascript section:

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

  function DoBlur(txt) 
  {
      txt.className = 'unfocus';
  }
</script>

and the 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 at:
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

edited Apr 10, 2011 at 8:33

answered Apr 10, 2011 at 8:01

Kamyar

18.8k9 gold badges101 silver badges174 bronze badges

3 Comments

user478636 Over a year ago

i have done what u said but it doesnt work...i have edited the code in the main post....

Kamyar Over a year ago

Sorry. Forgot to change the css class name. Updated the answer, lookl at the CSS class name. it should be focus

Kamyar Over a year ago

Also type should be text/javascript. my bad!

Collectives™ on Stack Overflow

CSS of a asp textbox control

4 Answers 4

4 Comments

Comments

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related