Question

我有一个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;
}

Answer 1

编辑：我看到你更新了你的帖子，所以要澄清一下：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？你的两个选择器不匹配...

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

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

你不能只使用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

asp文本框控件的CSS

4 个答案: