文本输入字段 CSS 样式

Posted

技术标签:

【中文标题】文本输入字段 CSS 样式【英文标题】:Text Input Field CSS Styling 【发布时间】:2010-12-19 23:58:18 【问题描述】:

我有一个文本输入字段,其中包含一些浅灰色字体的示例文本,当用户单击以在字段中键入时,我正在清除这些文本。发生这种情况时,我还想将字体颜色更改为黑色,以便用户更容易阅读他们正在输入的内容。这是我目前使用的:

<input type="text" name="q" value="Enter keywords" onfocus="if(this.value == 'Enter keywords') this.value = '';" style="width:630px;font-size:14px;color:#ADADAD;border:1px solid #ADADAD;">

这是否可能使用 CSS,如果可以,我如何更新我的文本字段来完成此操作。提前感谢您的帮助!

【问题讨论】:

【参考方案1】:

试试

<input type="text" name="q" value="Enter keywords" onfocus="if(this.value == 'Enter keywords') this.value = ''; this.style.color = 'black';" style="width:630px;font-size:14px;color:#ADADAD;border:1px solid #ADADAD;">

【讨论】:

@Nick - 工作就像一个魅力。感谢您的快速回复!【参考方案2】:

最简单的解决办法是:

<input type="text" name="q" value="Enter keywords" onfocus="if(this.value == 'Enter keywords') this.value = '';this.style.color = '#000000'; else this.style.color = '#000000';" style="width:630px;font-size:14px;color:#ADADAD;border:1px solid #ADADAD;">

但如果你对 jQuery 感兴趣,那么……你可以施展魔法。

【讨论】:

【参考方案3】:

在焦点处理程序中,尝试 this.style.color = "#000000";

【讨论】:

以上是关于文本输入字段 CSS 样式的主要内容,如果未能解决你的问题,请参考以下文章

css 删除输入文本的样式,卸妆样式

css 更改输入占位符文本样式

css 样式输入占位符文本

css CSS片段用于覆盖输入文本的chrome自动完成样式

HTML输入渐变文本

为啥我的 CSS 样式输入不会位于其标签旁边?