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

概述我需要在占位符中创建具有2种颜色的输入. 这是解决方案,适用于Chrome. http://jsfiddle.net/vmuJm/ HTML <input placeholder="Name" class="required" /> CSS .required::-webkit-input-placeholder:after { content:'*'; color: red;} 我需要在占位符中创建具有2种颜色的输入.

这是解决方案,适用于Chrome.

http://jsfiddle.net/vmuJm/

HTML

<input placeholder="name"  />

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没有显示内容：之后,所以这个解决方案不起作用.有没有其他方法可以在一个占位符中使用CSS和HTML获得2种颜色？

铬：

FF：

解决方法 这是一个不使用JavaScript的跨浏览器解决方案：

Live demo

内联元素这样的输入不支持：before和：after.为了使事情变得更加困难,所有浏览器并不完全支持占位符选择器及其伪类,正如您所发现的那样.

因此,解决方法是添加一个相对位于输入框顶部的标签,其中一个for属性指向输入文本框.这样,当用户点击标签(假占位符)时,焦点就会进入输入框.

用required =“required”替换你的class =“required”.这使您有机会使用:invalid和:valid选择器.

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

由于电子邮件不是必需的,因此请将原始占位符保留在那里,并将此名称留给此黑客.

我还将您的电子邮件从type =“text”更改为type =“email”,以便在移动设备上获得更好的用户体验.

总结

以上是内存溢出为你收集整理的html – 输入字段的一个占位符中的2种颜色全部内容，希望文章能够帮你解决html – 输入字段的一个占位符中的2种颜色所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。