输入字段的一个占位符中有 2 种颜色 [英] 2 colors in one placeholder of input field
问题描述
我需要在占位符中创建有 2 种颜色的输入.
这是在 Chrome 中运行良好的解决方案.
input
等内联元素不支持 :before
和 :after
.如您所见,并非所有浏览器都完全支持占位符选择器及其伪类,这让事情变得更加困难.
因此,解决方法是添加一个 label
相对放置在输入框的顶部,并带有一个指向输入文本框的 for
属性.这样,当用户点击标签(假占位符)时,焦点会进入下方的输入框.
将您的 class="required"
替换为属性 required="required"
.这让您有机会使用 :invalid 和:valid 选择器,还让浏览器显示验证错误,当提交的表单带有空的必填字段时.
input {宽度:160px;}输入[类型=提交] {宽度:自动;}输入[必填]+标签{颜色:#999;字体系列:Arial;字体大小:.8em;位置:相对;左:-166px;/* 输入宽度的负数 */}输入[必需]+标签:{内容: '*';红色;}/* 当输入没有内容时显示占位符(无内容=无效)*/输入[必需]:无效+标签{显示:内联块;}/* 当输入有一些文本输入时隐藏占位符 */输入[必需]:有效+标签{显示:无;}
因为不需要电子邮件,所以将本地占位符留在那里,只是为了这个名字.
我还将您的电子邮件从 type="text"
更改为 type="email"
,以便在移动设备上获得更好的用户体验.
I need create input which has 2 colors in a placeholder.
and here is solution which works well in 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;
}
But my current FF 29.0.1 doesn't show content from :after, so this solution doesn't work. Is there any other way to get 2 colors in one placeholder with css and html?
Chrome:
FF:
Here is a cross-browser solution that does not use Javascript:
Inline elements such input
do not support :before
and :after
. To make things even harder the placeholder selector and their pseudo-classes are not fully supported by all browsers, as you found out.
So, the workaround is to add a label
placed relatively on top of the input box with a for
attribute pointing to the input text box. This way, when user clicks the label (fake placeholder) the focus goes into the input box underneath.
Replace your class="required"
by the attribute required="required"
. This gives you an opportunity to use the :invalid and :valid selectors, and also lets the browser display a validation error, when the form is submitted with empty required fields.
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>
Since the email is not required, leave the native placeholder there, and just to this hack for the name.
I also changed your email from type="text"
to type="email"
for better user experience on mobile devices.
这篇关于输入字段的一个占位符中有 2 种颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!