html - 多彩多姿的占位符文本

标签 html css

我需要创建一个具有彩色占位符文本的 HTML 文本输入元素。所有文本都应为灰色,但结束星号应为红色,如:

enter image description here

这让我觉得这是一项看似简单的任务,但实际上要复杂得多,因为浏览器如何限制我们对 native 输入元素进行样式设置的能力。

我听说有人使用 CSS 覆盖 native 输入样式,以便他们可以使用自定义字体等,但是有没有两种特殊的文本样式(灰色和红色)?还是我需要使用替代(非本地)输入?

最佳答案

尝试这样的事情:http://jsfiddle.net/vmuJm/

诀窍:处理占位符文本,向所需输入添加“必需”类,并使用 :after 伪元素添加适当颜色的星号。

[编辑] 看起来这只适用于 Webkit 浏览器。

关于html - 多彩多姿的占位符文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20667108/

相关文章:

jquery - 如何使用 jquery 将元素的样式更改为滚动

javascript - Android上的HTML5音频自动播放-iframe技巧

css - 移动按钮推送内容

css - 无法更改 bootstrap-3 中输入的宽度

php - 桌面网站上的汉堡包菜单(带有小尺寸图标),用于切换单击时的全宽和高度下拉菜单(Bootstrap 4)

javascript - 如何向 DIV 添加点击属性而不将其应用于其中的元素?

php - 分层选择人口 jQuery/PHP

jquery - 遍历嵌套列表 - jQuery

html - 不处理此代码的顶级属性

css - 如何将表格中的图片与文字对齐? (jquery 数据表对表头中带有文本的图像进行排序)