html - 如何使用CSS在占位符中获取星号

Question

我想在输入的占位符中添加一个星号。是这样的:

我在互联网上搜索过，但找不到可行的解决方案。

我目前的做法:

目前我正在尝试将它添加到 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">

我不想直接在占位符中添加符号。但是会喜欢它以任何其他方式让我以不同的方式设置符号样式。(假设我想要我的符号为蓝色，但其余文本为灰色)。

所以，如果有人能帮我在占位符上加一个星号。

JSFIDDLE

Answer 1

为什么不简单地在占位符属性本身中使用 *？

.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>