多彩多姿的占位符文本 [英] Multicolored placeholder text

问题描述

我需要创建一个HTML文本输入元素，其中包含多彩多姿的占位符文本。所有文字都应该是灰色的，但是一个结束星号应该是红色的，如：

这让我看起来很简单的任务，实际上是一个更复杂的因为浏览器限制我们的样式本地输入元素的能力。

我听说过使用CSS覆盖原生输入样式的人，所以他们可以使用自定义字体等，但是有两种特殊的文本样式红）？

尝试这样： http://jsfiddle.net/vmuJm/\">http://jsfiddle.net/vmuJm/

技巧：寻址占位符文本，添加需要输入的必需类，并使用：之后的伪元素添加相应颜色的星号。

它似乎只适用于Webkit浏览器。

I need to create an HTML text input element that features multicolored placeholder text. All of the text should be gray except, but a closing asterisk should be red, as in:

This strikes me as a seemingly simple task that is actually a lot more complicated because of how browsers restrict our ability to style native input elements.

I have heard of people using CSS to override native input styles so they can use custom fonts, etc., but is there away to have two special text styles (gray and red)? Or do I need to use an alternative (non-native) input?

解决方案

Try something like this: http://jsfiddle.net/vmuJm/

The trick: address the placeholder text, add a "required" class to required inputs, and use the :after pseudo element to add an appropriately colored asterisk.

[EDIT] It looks like this is only working for Webkit browsers.

这篇关于多彩多姿的占位符文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！