How can I add a red asterisk in a placeholder?

Question

The placeholder should show Enter a name* with a white text but the * red. I'm using Bootstrap 4 in Chrome. My HTML and CSS code are these:

.form-control::-webkit-input-placeholder::after {
    color: red;
    text-align: right;
    font-size: 50px;
    content: "*";
}

<input type="text" placeholder="Your Name" class="form-control py-4" style="background: #273a71; color: white; border: 0;">

you can use label and required to achieve that – Naga Sai A Feb 09 '19 at 20:00 — Naga Sai A, Feb 09 '19 at 20:00

Naga Sai A · Answer 1 · 2019-02-09T20:56:35.633

To achieve expected result, use below option

Use span or label instead of placeholder (Using span, in case you want label and placeholder)
Use on focus to hide span with css

.placeholder{
  color: white;
  position: relative;
  top: -30px;
}

.placeholder:after{
  content: '*';
  color: red
}


.form-control:focus + .placeholder { 
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<input type="text"  class="form-control py-4" style="background: #273a71; color: white; border: 0;" required="required">
<span class="placeholder">Your Name</span>

codepen - https://codepen.io/nagasai/pen/GzQVev

After typing something and click outside of input, focus is getting removed and you see placeholder and input value on top of eachother. — chirag panchani, Jul 08 '20 at 08:36

How can I add a red asterisk in a placeholder?

1 Answers1