如何使用CSS在占位符中获取星号 [英] How to get asterisk in placeholder with css

问题描述

我想在输入的占位符上添加一个星号.像这样的东西:

I want to add an asterisk mark to placeholder of inputs. Something like this:

我已经搜索过互联网，但是找不到可行的解决方案.

I have searched internet but could not find a working solution.

HTML:

<input type="text" name="your-name" placeholder="Naam">

我当前的做法:

当前，我正在尝试将其添加到after伪元素中，但是没有出现.

Currently I am trying to add it in the after pseudo element but that is not appearing.

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

我不想直接在占位符中添加符号.但是会以任何其他方式喜欢它，使我可以对符号进行不同的样式设置(例如，我想将蓝色用作我的符号，但其余部分用灰色表示).

I do not want to add the symbol directly in the placeholder. But would love it in any other way that will let me style the symbol differently.( say I want blue color for my symbol but rest of the text in grey).

因此，如果有人可以帮助我在占位符上添加一个星号.

So, if anyone can help me add an asterisk to the placeholder.

JSFIDDLE

JSFIDDLE

推荐答案

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

Why don't you simply use * in placeholder attribute itself?

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

EndNote:您不能在替换的html元素中使用伪元素

EndNote: You can't use pseudo elements in replaced html elements

根据您的评论，您还可以使用必填属性，然后像这样设置它们的样式:

As per your comment you can also use required attribute and then style them like this:

<input type="text" name="your_name" placeholder="*" required />
[required]::-webkit-input-placeholder {
    color:    #f00;
}

根据您的下一个注释要求，您需要在以下范围内包装需要星号的输入:

As per your next comment requirement, you need to wrap your input which needs asterisks in a span like below:

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

这篇关于如何使用CSS在占位符中获取星号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！