How can I add a black-colored name and a red-colored star to the Placeholder Star as a required field?

Question

How can I add a black-colored name and a red-colored star to the Placeholder Star as a required field?

I'm looking to customize the placeholder text in an input field. I want the main placeholder text to be in black and have a red star indicating it's a required field. However, my attempt to set the color of the star specifically to red using `::-WebKit-input-placeholder:after` didn't work as expected. Can someone suggest another method to achieve this color customization?

I've already tried using the following code snippet, but it didn't give me the desired result:

::-WebKit-input-placeholder:after {
    content: "*";
    color: red;
}

For demonstration purposes, you can check out the image by visiting the link below: https://i.sstatic.net/Go2Co.jpg

javascript jquery html css

Answer 1

Answer №1

It will definitely meet your needs. I have recently written the code for a single field.

.form-group{position:relative;}
.form-group input{position:relative;z-index:9;background:transparent;border:1px solid #aaa;padding: 5px}
.form-group label{position:absolute;left:5px;top:5px;z-index:1;color:#ccc;}
.form-group label::after{content:"*";color:red;}
input[required]:valid + label{display: none;}

<div class="form-group">
  <input type="text"  name="name" required="required" />
  <label>Enter first name</label>
</div>

Answer 2

It will definitely meet your needs. I have recently written the code for a single field.

.form-group{position:relative;}
.form-group input{position:relative;z-index:9;background:transparent;border:1px solid #aaa;padding: 5px}
.form-group label{position:absolute;left:5px;top:5px;z-index:1;color:#ccc;}
.form-group label::after{content:"*";color:red;}
input[required]:valid + label{display: none;}

<div class="form-group">
  <input type="text"  name="name" required="required" />
  <label>Enter first name</label>
</div>

Answer 3

Answer №2

There is no one-size-fits-all solution.

One approach is to utilize background images, but this requires manually setting the star position for each field:

input::placeholder {
  background-image: url('images/some-red-star.png') no-repeat;
  background-position-x: 50px;
}

If manually placing stars is not feasible, you can create a faux HTML placeholder by inserting a div below each input and styling it to mimic a placeholder:

<input required="required">
<div class="placeholder">name<span>*</span>

.placeholder { 
  position: ... 
  pointer-events: none;
  user-select: none;
}
.placeholder > span { color: red; }
input:valid ~ .placeholder {
  display: none;
}

Answer 4

There is no one-size-fits-all solution.

One approach is to utilize background images, but this requires manually setting the star position for each field:

input::placeholder {
  background-image: url('images/some-red-star.png') no-repeat;
  background-position-x: 50px;
}

If manually placing stars is not feasible, you can create a faux HTML placeholder by inserting a div below each input and styling it to mimic a placeholder:

<input required="required">
<div class="placeholder">name<span>*</span>

.placeholder { 
  position: ... 
  pointer-events: none;
  user-select: none;
}
.placeholder > span { color: red; }
input:valid ~ .placeholder {
  display: none;
}

Answer 5

Answer №3

Give this a try, I believe it could be helpful to you

input {
 width: 200px;
 padding: 8px;
}

input[required] + label {
  position: relative;
  color: #000;
  font-size: 16px;
  left: -210px;
}

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

.btn {
  width: auto;
  margin: 10px 0;
}

<form>
  <input type="text" id="box1" required="required" />
    <label for="name">Enter First Name</label><br/><br/>
  <input type="text" id="box1" required="required" />
    <label for="name">Enter Last Name</label><br/>
  <input class="btn" type="submit" />
</form>

Answer 6

Give this a try, I believe it could be helpful to you

input {
 width: 200px;
 padding: 8px;
}

input[required] + label {
  position: relative;
  color: #000;
  font-size: 16px;
  left: -210px;
}

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

.btn {
  width: auto;
  margin: 10px 0;
}

<form>
  <input type="text" id="box1" required="required" />
    <label for="name">Enter First Name</label><br/><br/>
  <input type="text" id="box1" required="required" />
    <label for="name">Enter Last Name</label><br/>
  <input class="btn" type="submit" />
</form>

How can I add a black-colored name and a red-colored star to the Placeholder Star as a required field?

Answer №1

Answer №2

Answer №3

Similar questions

Has the HTML attribute 'step' stopped functioning properly?

Looking for a more efficient method to pass components with hooks? Look no further, as I have a solution ready for

Using JavaScript, add a complex JSON record to a JSON variable by pushing it

Switch up image transitions using Javascript

Avoiding special characters in URLs

Utilizing useState for React Data Picker

verify that the div has finished loading with ajax

Updating Sencha list itemTpl on the fly

A guide on showcasing the compilation results of PHP code directly on the web browser

Show subscriptions retrieved from an Ajax .post request within a modal popup

Exploring ways to traverse a JSON encoded object in PHP with the help of JavaScript

Looking for a way to focus on an element similar to `event.target.focus()`

What methods can be employed to execute a intricate substitution utilizing both javascript and jQuery?

Connecting Vue component data to external state sources

The function is not explicitly declared within the instance, yet it is being cited during the rendering process in a .vue

What's the best way to add margin or padding to an SVG image within a v-app-bar

"Utilizing an AJAX request to dynamically fill form fields based on a database query as the selected value

Creating a striking two-tone border pattern in an HTML document

Tips for uploading files in asp.net using an ajax call

Unlock the power of TypeScript's inheritance by utilizing static methods for type