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