gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 13:23:59 25 4
gpt4 key购买 nike

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

这是在 Chrome 中运行良好的解决方案。

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 不显示来自 :after 的内容,所以这个解决方案不起作用。有没有其他方法可以使用 css 和 html 在一个占位符中获得 2 种颜色?

Chrome :

https://lh5.googleusercontent.com/-NN7pPNg49D8/U5DUKMAIJhI/AAAAAAAAzAg/LqltLDSNgD4/s0/2014-06-05_22-33-08.png

FF:

enter image description here

最佳答案

这是一个不使用 Javascript 的跨浏览器解决方案:

Live demo

input 等内联元素不支持 :before:after。正如您所发现的,并非所有浏览器都完全支持占位符选择器及其伪类,这让事情变得更加困难。

因此,解决方法是添加一个 label 并放置在输入框的相对顶部,并使用指向输入文本框的 for 属性。这样,当用户单击标签(假占位符)时,焦点进入下方的输入框。

用属性 required="required" 替换您的 class="required"。这使您有机会使用 :invalid:valid选择器,还可以让浏览器在提交的必填字段为空的表单时显示验证错误。

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

由于不需要电子邮件,因此将 native 占位符留在那里,只是为了这个 hack 的名称。

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

关于html - 输入字段的一个占位符中有 2 种颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24069830/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com