如何用css获取占位符中的星号

我想为输入的占位符添加一个星号标记。类似这样的：如何用css获取占位符中的星号

我搜索了互联网，但找不到工作解决方案。

HTML：

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

我目前的做法：

目前我试图伪元素后，将其添加在但没有出现。

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

我不想直接在占位符中添加符号。但是会以任何其他方式来爱它，让我以不同的方式设计符号（例如，我想为我的符号使用蓝色，但其余部分使用灰色）。

因此，如果任何人都可以帮我添加一个星号到占位符。

JSFIDDLE

来源

2016-05-31 Kiran Dash

@BhojendraNepal但是，这不会让我样式。假设我想为星号符号添加一个不同的颜色。 –

**星号**符号旨在保留在标签中以显示该字段为必填字段而非占位符。 – Shashank

是@Shashank。但我的客户也希望我将它添加到占位符中。所以，如果可以做到的话，我正在寻找一种方法。 –

你为什么不干脆用*占位符属性本身？

.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：你不能使用伪元素replaced html elements

根据您的意见，您还可以使用所需的属性，然后他们的风格是这样的：

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

来源

2016-05-31 05:12:58

但是，这会将颜色添加到整个占位符。我想要的是：只有占位符中的星号符号在灰色和其他文本中占位符呈红色。 –

对不起。你弄错我了。看到我的问题。在我的占位符中，我有“Naam”，但它应该以红色显示带星号的“Naam *”。 –

根据您的要求再次更新我的答案... –

如何用css获取占位符中的星号

回答

相关问题