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

我需要在占位符中创建具有2种颜色的输入.

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

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没有显示内容：之后,所以这个解决方案不起作用.有没有其他方法可以在一个占位符中使用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;
}

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

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

解决方法

猜你在找的HTML相关文章