Question

我希望文本字段中的文字像“你的名字*”一样 “你的名字”的颜色应为黑色，*的颜色应为红色我怎么能这样做？

请帮帮我。

Answer 1

您不能在一个文本框中使用不同的颜色。（无论如何，可靠地跨浏览器）

对于必填字段，此问题最常见的方法是将星号直接放在带有类的元素中的文本框后面，以将文本设置为红色。

示例：http://jsfiddle.net/JzFd4/

Answer 2

你不能;文本输入字段的值是纯文本。

如果需要，将解释（包括必要性指示符）放在标签中，而不是放入字段中。你可以使用标记作为指标，并为其着色：

<label for=name>Your name<span class=reqd>*</span>:</label>
<input id=name name=name size=40 required>

Answer 3

我认为你应该想要这个

<强> CSS

label{
    color:black;
}
label  span {
    color:red;
}
input{
    line-height:25px;
    color:gray;
    font-size:16px;
}

input:focus{
color:black;
}

<强> HTML

<label>
    Your Name:- <input type="text" value="your name"><span>*</span>
</label>

现场演示http://jsfiddle.net/rohitazad/dZmaZ/

Answer 4

这就是我在这里问的问题。
多色占位符。
Answer Link Here

这里有些诡计

.input-field {
    position: relative;
    display: inline-block;
}
.input-field > label {
    position: absolute;
    left: 0.5em;
    top: 50%;
    margin-top: -0.5em;
    opacity: 0.5;
}
.input-field > input[type=text]:focus + label {
    display: none;
}
.input-field > label > span {
    letter-spacing: -2px;
}
.first-letter {
    color: red;
}
.second-letter {
    color: blue;

<div class="input-field">
    <input id="input-text-field" type="text"></input>
    <label for="input-text-field"> 
        <span class="first-letter">your name</span>  
        <span class="second-letter">*</span>
    </label>
</div>

如何在文本字段中显示多种字体颜色

4 个答案: