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

【问题标题】：Styling of initial default value of a text field文本字段初始默认值的样式
【发布时间】：2015-06-12 07:47:37
【问题描述】：

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

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

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

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

请帮忙。

【问题讨论】：

简单的答案是，不，你不能。
哈哈，我刚刚做到了。
如果你的意思是你使用了公认的答案，那么不，你没有。这只是使用了另一个 span 元素并将其定位在输入的顶部。
只有最终结果很重要，是的，这是一种解决方法——但我确实修改了他的示例并使用了一些 jqyery

标签： html css input fonts

【解决方案1】：

您可以使用value 属性的指定值来定位input（如果您想定位value以开始“名字”，你可以用^=代替=):

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

JSFiddle

【讨论】：

当然是正确的，但是如果该字段的VALUE中的内容将来发生变化怎么办？您必须相应地更新 value="" CSS 规则以匹配。定位父 id / class 和 input[value] 可能更安全？
@samuidavid：嗯，id 当然更灵活，但问题是关于定位指定 value，所以我坚持答案。
我将默认值设置为“名字 ”。使用 css - 我想将全局样式应用于整个事物 - 例如字体系列、字体大小。然后我想有选择地在名字之后用红色设置星号 () 的样式。由于该 * 是属性中包含的值 - 我如何有选择地仅选择 value 属性中的星号部分使其变为红色。
@Prabhas : 我认为在纯 CSS 中是不可能的

【解决方案2】：

现在你可以这样做：

<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

【讨论】：

【解决方案3】：

如果您想仅设置* 的样式，那么您就不走运了。仅在 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;
}

JSFiddle

【讨论】：

我将默认值设置为“名字 ”。使用 css——我想将全局样式应用于整个事物——例如字体系列、字体大小。然后我想有选择地在名字之后用红色设置星号 () 的样式。由于该 * 是属性中包含的值 - 我如何有选择地仅选择 value 属性中的星号部分使其变为红色。

【解决方案4】：

只需这样做就足够了：

input[value] {
}

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

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

【讨论】：

【解决方案5】：

你可以使用这个 ::

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

【讨论】：