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

Question

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

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

现在我想select对一些文本进行如下样式设置：

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

请帮忙。

Answer 1

您可以使用 value 属性的指定值来定位 input（如果您想使用 "First Name",可以用^=代替=):

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

JSFiddle

Answer 3

只需这样做就足够了：

input[value] {
}

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

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

Answer 4

你可以使用这个::

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

Answer 5

现在您可以这样做：

<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

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

Styling of initial default value of a text field

html

css

fonts

input