Question

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

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

现在我想对某些文本进行选择性样式设置如下：

我将默认值设置为“名字*”。使用css-我希望将全局样式应用于整个事物 - 例如font-family，font-size。
然后我想在名字后用红色选择性地设置星号（*）的样式。由于*是属性中包含的值 - 如何有选择地仅选择值属性中的星号部分使其变为红色。

请帮忙。

Answer 1

您可以使用input属性的指定值定位value（如果您希望使用＆＃34;定位value 名字＆＃34; ，您可以使用^=代替=）：

input[type="text"][value="First Name"] {
   font-size: 10px;
   color: red;
   <...>
}

JSFiddle

Answer 2

如果您只想 *，那么你运气不好。没有办法在CSS中做到这一点。但是，有一种方法可以改变你的DOM：

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

然后，CSS：

.input-container {
  position: relative;
  display: inline-block;
}

.input-addon {
  position: absolute;
  right: 10px;
  top: 5px;
  color: red;
}

Damien_The_Unbeliever

Answer 3

现在你可以这样做：

<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;
}

::placeholder CSS pseudo-element

Answer 4

只需这样就足够了：

input[value] {
}

您还可以在PARENT ID /类名称前面添加选择器，以确保它在需要时对每个表单都是唯一的。

http://jsfiddle.net/samuidavid/vz9qxsfw/

Answer 5

你可以使用这个::

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

样式化文本字段的初始默认值

5 个答案: