我在互联网上搜索过,但找不到可行的解决方案。
我目前的做法:
目前我正在尝试将它添加到 after 伪元素中,但它没有出现。
input[type=text]::-webkit-input-placeholder:after {
content: '*';
color: red; vertical-align: top; font-size: 10px;
}
input[type=text]:-moz-placeholder:after { /* Firefox 18- */
content: '*';
color: red; vertical-align: top; font-size: 10px;
}
input[type=text]::-moz-placeholder:after { /* Firefox 19+ */
content: '*';
color: red; vertical-align: top; font-size: 10px;
}
input[type=text]:-ms-input-placeholder:after {
content: '*';
color: red; vertical-align: top; font-size: 10px;
}
<input type="text" name="your-name" placeholder="Naam">
我不想直接在占位符中添加符号。但是会喜欢它以任何其他方式让我以不同的方式设置符号样式。(假设我想要我的符号为蓝色,但其余文本为灰色)。
所以,如果有人能帮我在占位符上加一个星号。
最佳答案
为什么不简单地在占位符属性本身中使用 *?
.asterisk::-webkit-input-placeholder {
color: #f00;
}
.asterisk:-moz-placeholder {
color: #f00;
opacity: 1;
}
.asterisk::-moz-placeholder {
color: #f00;
opacity: 1;
}
.asterisk:-ms-input-placeholder {
color: #f00;
}
<input type="text" name="your_name" placeholder="*" class="asterisk" />
尾注:replaced html elements 中不能使用伪元素
根据您的评论,您还可以使用 required 属性,然后像这样设置它们的样式:
<input type="text" name="your_name" placeholder="*" required />
[required]::-webkit-input-placeholder {
color: #f00;
}
根据您的下一个评论要求,您需要将需要星号的输入包装在如下范围内:
.input-group{
position: relative;
}
.input-group::after{
content: '*';
position: absolute;
top: 3px;
left: 46px;
color: #f00
}
<span class="input-group">
<input type="text" name="your_name" placeholder="Naam" />
</span>
关于html - 如何使用CSS在占位符中获取星号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37537205/