在输入字段的一个占位符中有2种颜色 [英] 2 colors in one placeholder of input field

问题描述

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

这里是一个在Chrome中很好的解决方案。

内容元素输入不支援：before 和：之后。为了使事情变得更加困难，所有浏览器都不完全支持占位符选择器及其伪类。

因此，解决方法是添加一个标签放置在输入框的顶部，其中用于指向输入文本框的属性。

取代 class =required

code>由属性 required =required。这样，您就有机会使用：无效和：有效的选择器。

 < form> 
< input type =textid =namename =namerequired =required/> 
< label for =name> Name< / label> 
< br /> 
< input type =emailid =emailname =emailplaceholder =Email/> 
< br /> 
< input type =submit/> 
< / form> 
 
 input {
 width：160px; 
} 
 
 input [type = submit] {
 width：auto; 
} 
 
输入[必需] +标签{
 color：＃999; 
 font-family：Arial; 
 font-size：.8em; 
 position：relative; 
 left：-166px; / *输入宽度的负数* / 
} 
 
输入[必填] +标签：{
内容：'*'; 
 color：red; 
} 
 
 / *当输入没有内容（无内容=无效）时显示占位符* / 
输入[必填]：无效+标签{
显示：内联块; 
} 
 
 / *当输入有一些键入的文本时隐藏占位符* / 
 input [必需]：valid + label {
 display：none; 
} 
  

由于不需要电子邮件，请留下原生的预留位置，

我也将您的电子邮件从 type =text更改为 type =email，以便在移动设备上获得更好的用户体验。

I need create input which has 2 colors in a placeholder.

and here is solution which works well in 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;
}

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:

Live demo

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.

Replace your class="required" by the attribute required="required". This gives you an opportunity to use the :invalid and :valid selectors.

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

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屋！