Html 文本字段初始默认值的样式设置

我有一个html输入文本字段，如下所示：

<input type="text" name="fName" class="inpField" size="20" value="First Name *" />

现在我想对一些文本进行选择性的样式设置，如下所示：

<input type="text" name="fName" class="inpField" size="20" value="First Name *" />

---

我将默认值设置为“First Name*”。使用css-我想将全局样式应用于整个内容-例如字体系列、字体大小

然后，我想有选择地将名字后面的星号（*）设置为红色。既然*是一个包含在属性中的值，我如何有选择地只选择value属性中的星号部分使其变为红色

---

请提供帮助。

您可以使用

值

属性的指定值将

输入

作为目标（如果您想将

值

作为目标，以“名字”开头，您可以使用

^=

而不是

=

）：

input[type=“text”][value=“First Name”]{
字体大小：10px；
颜色：红色；
}

如果你只想设计

*

，那你就太倒霉了。没有办法做到这一点，只是CSS。但是，有一种方法可以通过更改DOM来实现这一点：

<div class="input-container">
  <input type="text" name="fName" class="inpField" size="20" value="First Name" />
  <span class="input-addon">*</span>
</div>

---

只要这样做就足够了：

input[value] {
}

如果需要，还可以在选择器前面加上父id/类名，以确保每个表单的选择器都是唯一的

---

您可以使用以下命令：

text.inpField {
       font-size: 10px;
       color: red;
    }

---

现在你可以这样做：

<input type="email"
       name="email"
       placeholder="Your Email"
       id="newsletter-subscribe-email-field">

---

当然正确，但是如果字段值中的内容将来发生变化怎么办？您必须相应地更新value=”“CSS规则以匹配。也许以父id/类为目标并输入[value]更安全？@samuidavid：当然，

id

更灵活，但问题是如何以指定的

value

为目标，所以我坚持回答。我将默认值设置为“First Name”。使用css-我想将全局样式应用于整个内容-例如字体系列、字体大小。然后我想有选择地将名字后面的星号（）样式设置为红色。由于该*是属性中包含的一个值-如何有选择地仅选择值属性中的星号部分使其变为红色。@Prabhas:我认为在纯CSSI中不可能将默认值设置为“First Name”。使用css-我想将全局样式应用于整个内容-例如字体系列、字体大小。然后我想有选择地将名字后面的星号（）样式设置为红色。既然*是一个包含在属性中的值-我如何在value属性中只选择星号部分使其变为红色。简单的答案是，不，你不能。哈哈，我只是这么做了。如果你是说你使用了接受的答案，那么不，你没有。这只是使用了另一个

span

元素，并将其放置在输入的顶部。只有最终结果才重要，是的，这是一个解决方法-但我确实修改了他的示例，并使用了一些jqyery

<input type="email"
       name="email"
       placeholder="Your Email"
       id="newsletter-subscribe-email-field">

#newsletter-subscribe-email-field::placeholder,
#newsletter-subscribe-email-field::-webkit-input-placeholder,
#newsletter-subscribe-email-field:-ms-input-placeholder,
#newsletter-subscribe-email-field::-ms-input-placeholder {
    color:#5472e8;
}