CSS asp文本框控件的CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5610409/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS of a asp textbox control
提问by user478636
I have a ASP text box control. When the user focuses on text box, i want to change the background color of the text box from gray to white.
我有一个 ASP 文本框控件。当用户关注文本框时，我想将文本框的背景颜色从灰色更改为白色。
here is the css file, but its not changing the color after focusing on the text box.
这是 css 文件，但在关注文本框后它不会改变颜色。
<script language="javascript" type="text-javascript">
function DoFocus(txt)
{
txt.className = 'focus';
}
</script>
Textbox
文本框
<asp:TextBox ID="txtFirstName" runat="server"
CssClass="textbox" MaxLength="50" Width="188px" onfocus="DoFocus(this)">
CSS
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;
}
回答by Michael Rose
EDIT:I saw you updated your post, so to clarify: ASP creates an inputHTML element (correct me if I'm wrong) and you can always style this via the :focusselector in CSS, no need for Javascript, but also add input.textbox:activeto catch some buggy IE...
编辑：我看到你更新了你的帖子，所以澄清一下：ASP 创建了一个inputHTML 元素（如果我错了，请纠正我），你总是可以通过:focusCSS 中的选择器来设置它的样式，不需要 Javascript，但也可以添加input.textbox:active一些有问题的 IE...
input.textbox:focus, input.textbox:active {
/* everything you put here will be aplied to ANY focused input element */
}
Judging from your pasted code, instead of
从你粘贴的代码来看，而不是
.input_text:focus, input.input_text_focus {
border-color:#646464;
background-color:#ffffc0;
}
use
用
input.textbox:focus, input.input_text_focus {
...
}
Or why do you suddenly use the class input_textwhen you have input.textboxin the firsthand? Your two selectors don't match...
或者为什么input_text当你有input.textbox第一手资料时突然使用这门课？您的两个选择器不匹配...
回答by Mikhail
Here an approach with the use separated CSS classes specified via javascript:
这是通过 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>
回答by Ali
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;
}
回答by Kamyar
You cannot do it by just using css. you have to use javascript as well. For example:
仅使用 css 是无法做到的。你也必须使用javascript。例如：
<asp:TextBox runat="server" id="myTextbox" onfocus="DoFocus(this)" onblur="DoBlur(this)"></asp:TextBox>
the javascript section:
javascript部分：
<script language="javascript" type="text/javascript">
function DoFocus(txt)
{
txt.className = 'focus';
}
function DoBlur(txt)
{
txt.className = 'unfocus';
}
</script>
and the css:
和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;
}
You can find some good examples at:
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
您可以在以下位置找到一些很好的示例：
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
