asp文本框控件的CSS

时间:2011-04-10 07:44:05

标签: asp.net css textbox stylesheet

我有一个ASP文本框控件。当用户关注文本框时,我想将文本框的背景颜色从灰色更改为白色。

这里是css文件,但是在关注文本框后它没有改变颜色。

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

文本框

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

4 个答案:

答案 0 :(得分:7)

编辑:我看到你更新了你的帖子,所以要澄清一下:ASP创建了一个input HTML元素(如果我错了,请纠正我),你可以随时通过CSS中的:focus选择器,不需要Javascript,还可以添加input.textbox:active来捕获一些错误的IE ...

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

根据您粘贴的代码判断,而不是

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

使用

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

或者,为什么在第一手资格input_text时突然使用课程input.textbox?你的两个选择器不匹配...

答案 1 :(得分:2)

这是一种使用javascript:

指定的分离CSS类的方法
<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>

答案 2 :(得分: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;
  } 

答案 3 :(得分:1)

你不能只使用css来做到这一点。你也必须使用javascript。例如:

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

javascript部分:

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

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

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

你可以找到一些很好的例子:
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