仅将占位符中的星号更改为红色 [英] change only the asterisk in placeholder to red

问题描述

我在使用占位符时遇到问题.我想将占位符内部星号的颜色更改为红色，其余部分为暗黑色.

I am having trouble with a placeholder. I would like to change the color of the asterisk inside of the placeholder to red and leave the rest the dim black.

我使用 bootstrap .form-control 进行标记.

I am using bootstrap .form-control for markup.

我想知道是否有插件/简单的方法可以做到这一点.JS 或 CSS.

I would like to know if there is a plugin/easy method of doing this. JS or CSS.

推荐答案

我不知道有什么简单的方法可以在占位符中包含 2 种颜色.

I don't know of any easy way to have 2 colors in a place holder.

您可以尝试使用 -webkit-input-placeholder::after 在占位符后添加星号，并更改其颜色，但此解决方案不适用于所有浏览器:见这里

You can try adding an asterisk after your placeholder using -webkit-input-placeholder::after, and change its color, but this solution does not work in all browsers: See here

您可以尝试这样的操作并将占位符添加为标签...

You can try something like this and add your placeholder as a label...

input[required] + label {
    position: relative;
    left: -170px; /* move the label left and place it inside the input */
    color: #757575; /* placeholder color here */
}

input[required] + label:after {
    content:'*';
    color: red;
}

<input type="text" id="myInput" name="myInput" required="required" />
<label for="myInput">IME IN PRIIMEK</label>

这篇关于仅将占位符中的星号更改为红色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！