输入字段的一个占位符中的2颜色

Question

http：//jsfiddle.net/vmujm/

html

<input placeholder="Name" class="required" />

CSS

.required::-webkit-input-placeholder:after {
    content:'*';
    color: red;
}
.required:-moz-placeholder:after {
    /* Firefox 18- */
    content:'*';
    color: red;
}
.required::-moz-placeholder:after {
    /* Firefox 19+ */
    content:'*';
    color: red;
}
.required:-ms-input-placeholder:after {
    content:'*';
    color: red;
}

但我当前的FF 29.0.1并未显示出：之后的内容，因此该解决方案不起作用。还有其他方法可以在一种占位符和html的占位符中获得两种颜色？ chrome：

ff：

here是一种跨浏览器解决方案，不使用JavaScript：

livedemo

Answer 1

input

和

:before

。为了使事情变得更加困难，占位符选择者及其伪级并没有得到所有浏览器的完全支持。 so，解决方法是将一个相对放置在输入框的顶部，并指向输入文本框。这样，当用户单击标签（假占位符）时，焦点就会进入下面的输入框。 属性:after重新定位您的label

。这使您有机会使用

：无效和

：有效

选择器，还可以让浏览器显示验证错误，当表单与空所需字段提交时。

for

class="required"

由于不需要电子邮件，请将本地占位符留在那里，然后将其插入这个名字。

我还将您的电子邮件从

required="required"

更改为

input {
  width: 160px;
}

input[type=submit] {
  width: auto;
}

input[required]+label {
  color: #999;
  font-family: Arial;
  font-size: .8em;
  position: relative;
  left: -166px;
  /* the negative of the input width */
}

input[required]+label:after {
  content: '*';
  color: red;
}


/* show the placeholder when input has no content (no content = invalid) */

input[required]:invalid+label {
  display: inline-block;
}


/* hide the placeholder when input has some text typed in */

input[required]:valid+label {
  display: none;
}

，以在移动设备上获得更好的用户体验。

jose的解决方案启动，无需使用“必需”属性，也可以做您想要的。

关键点是CSS有

<form>
  <input type="text" id="name" name="name" required="required" />
  <label for="name">Name</label>
  <br/>
  <input type="email" id="email" name="email" placeholder="Email" />
  <br/>
  <input type="submit" />
</form>

选择器，请参阅

Mozilla网站

提问

基本上是答案是否定的。取决于浏览器。

type="text"

和

type="email"

不能在某些元素上使用。不过，这取决于浏览器，就像Chrome可以做到的那样。
Maybe可以使用JavaScript解决它吗？我不知道

Answer 2

:not

:before

Answer 3