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