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

Question

我希望文本框内的文字显示为"你的名字*"
"你的名字"的颜色应该是黑色，"*"的颜色应该是红色。
我该怎么做？
请帮帮我。

- khurram

---

据我所知，在文本字段或文本区域中，您无法部分更改文本颜色。您需要研究使用contenteditable属性，并将其内容复制到文本字段中以存储值（就像大多数所见即所得编辑器所做的那样）。 - Ege Özcan

Answer 1

不行，文本输入框的值只能是纯文本。

将说明（包括必填指示器，如果需要的话）放在标签中，而不是字段中。然后，您可以使用标记表示指示器，并对其进行着色：

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

- Jukka K. Korpela

---

谢谢您的快速回复。我的设计师给了我包含我在问题中提到的这种文本字段的页面设计。这对我来说是新事物。 :) - khurram

Answer 2

在一个文本框中无法使用不同的颜色。（无论在哪个浏览器上都是如此可靠）

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

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

- benni_mac_b

---

我想在我的图片上实现圆形悬停效果。该图片的分辨率为230 x 231。当鼠标悬停在图片上时，只会显示圆形部分。具体实现方法是什么？ - khurram

创建一个新问题，整个社区都可以提供帮助 :) - benni_mac_b

我创建了新的，但系统告诉我它不符合我们的质量标准。 :( - khurram

不要被它吓到，再试一次并包括尽可能多的信息和代码。尝试实现你想要达成的目标，并询问你卡住的部分。祝好运！ - benni_mac_b

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/

- Rohit Azad Malik

---

我最近加入了这个网络，这是一个非常好的网站。 - khurram

Answer 4

这就是我在问题中所询问的。
多颜色占位符。
答案链接在这里

这里有一些技巧。

.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>

- khurram