Issue
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.
My current approach:
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;
}
<input type="text" name="your-name" placeholder="Naam">
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.
Solution
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: 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>
Answered By - Bhojendra Rauniyar
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.