asp文本框控件的CSS

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

你不能通过使用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：
http://www.codeproject.com/KB/aspnet/inputBgOnFocus.aspx
http://viralpatel.net/blogs/2009/09/change-form-input-textbox-style-focus-jquery.html
：

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

你可以找到一些很好的例子

Answer 3

这里通过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 4

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