多彩多姿的占位符文本

Question

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

由于浏览器如何限制我们设置原生输入元素的样式，这实际上要复杂得多，这实际上要复杂得多。

我听说有人使用CSS来覆盖原生输入样式，因此他们可以使用自定义字体等，但是有没有两种特殊的文字样式（灰色和红色）？或者我是否需要使用替代（非本机）输入？

Answer 1

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

技巧：解决占位符文本，为所需输入添加“必需”类，并使用:after伪元素添加适当颜色的星号。

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

Answer 2

我有一种相当有趣的方式来做到这一点，似乎在所有浏览器中都很好用。

（在IE 8 +，Chrome和Firefox中正常工作。）

我正在做的是使用我放在标签内部的跨度作为值文本。

这是html结构，

<label><span class="title">Name<span class="symbol">*</span></span>
    <input type="text" />
</label>

css，

label {
    position: relative;
}

label:hover span {
    display: none;
}

input[type="text"]:focus, input[type="text"]:active {
    z-index: 2;
}

label input[type="text"] {
    position: relative;
}

.title {
    color: gray;
    position: absolute;
    left: 5px;
    top: 1px;
    z-index: 1;
}

.symbol {
    color: red;
}

最后这里是我写的jQuery，如果填写了输入，则不允许跨度悬停在输入上。

$('input[type="text"]').blur(function() {
    if( $(this).val().length >= 1) {
        $(this).toggleClass('active');
    }
    else {
        $(this).removeClass('active');
    }
});

以下是JSFIDDLE。