Html 在表单的占位符内添加跨度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22415875/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add span inside form's placeholder
提问by user3067592
I wanna add a color asterix in my form's placeholder, is it possible?
我想在表单的占位符中添加一个颜色星号，这可能吗？
回答by Sergey Nakhankov
Here is pure css solution IE10+
这里是纯 css 解决方案 IE10+
.input-placeholder {
position: relative;
}
.input-placeholder input {
padding: 10px;
font-size: 25px;
}
.input-placeholder input:valid + .placeholder {
display: none;
}
.placeholder {
position: absolute;
pointer-events: none;
top: 0;
bottom: 0;
height: 25px;
font-size: 25px;
left: 10px;
margin: auto;
color: #ccc;
}
.placeholder span {
color: red;
}<form novalidate>
<div class="input-placeholder">
<input type="text" required>
<div class="placeholder">
Email <span>*</span>
</div>
</div>
<input type="submit">
</form>回答by Praxis Ashelin
回答by Robert Messerle
As far as I know, this is not possible.
据我所知，这是不可能的。
One solution I have seen used in the past is to add a background-image of a red asterisk to your input field, but that makes it difficult to duplicate the visual alignment you are going for. More info on this method: Use CSS to automatically add 'required field' asterisk to form inputs
我在过去看到的一种解决方案是在输入字段中添加一个红色星号的背景图像，但这使得复制您想要的视觉对齐变得困难。有关此方法的更多信息：使用 CSS 自动添加“必填字段”星号到表单输入
Another solution would be to add the span (and placeholder text) outside of the input field, but that would require some JavaScript to control when it is and isn't visible.
另一种解决方案是在输入字段之外添加跨度（和占位符文本），但这需要一些 JavaScript 来控制它何时可见和不可见。
Here is a JSFiddle I just created for this method (using jQuery): http://jsfiddle.net/nLZr9/
这是我刚刚为此方法创建的 JSFiddle（使用 jQuery）：http: //jsfiddle.net/nLZr9/
HTML
HTML
<form>
<div class="field">
<label class="placeholder" for="email">
Email Address
<span class="red">*</span>
</label>
<input id="email" type="text" />
</div>
</form>
CSS
CSS
.field {
position: relative;
height: 30px;
width: 200px;
}
input, label {
position: absolute;
top: 0;
left: 0;
bottom: 0;
top: 0;
background: transparent;
border: 0;
padding: 0;
margin: 0;
text-indent: 5px;
line-height: 30px;
}
JS
JS
$('.field input')
.on( 'focus', function () {
$(this).siblings('label').hide();
} )
.on( 'blur', function () {
if ( !$(this).val() )
$(this).siblings('label').show();
} );
回答by doydoy44
回答by Anushka
You can try the following :
您可以尝试以下操作：
HTML
HTML
<div class="hold">
<input type="text" placeholder="" required="required">
<span class="req_placeholder">Name <span>*</span></span>
</div>
CSS
CSS
.hold {
position: relative;
}
input[required="required"]:valid + .req_placeholder {
display: none;
}
.req_placeholder {
position: absolute;
top: 2px;
left: 2px;
}
.req_placeholder span {
color: red;
}
回答by Diodeus - James MacFarlane
This is a good case for pseudo-elements.
这是伪元素的好例子。
.someclass {
position:relative;
}
.someclass:after {
position:absolute;
top:0;
right:10px;
content: "*";
color:#ff0000
}
...adjust to your own layout.
...调整到您自己的布局。
回答by sajushko
You can use pseudo elements in CSS (not supported in old browsers)
您可以在 CSS 中使用伪元素（旧浏览器不支持）
.mandatory::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #ff0000;
}
.mandatory:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #ff0000;
}
.mandatory::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #ff0000;
}
.mandatory:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #ff0000;
}
.mandatory:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
color: #ff0000;
}<form>
<p>
<label for="input1">Input 1:</label>
<input type="text" id="input1" placeholder="Fill input" class="mandatory" />
</p>
<p>
<label for="input2">Input 2:</label>
<input type="text" id="input2" placeholder="Fill input" />
</p>
<p>
<label for="textarea">Input 2:</label>
<textarea id="textarea" placeholder="Fill textarea"></textarea>
</p>
</form>