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:

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

How is the purpose of nesting functions within functions achieved in nodejs?

Tips for achieving seamless scrolling with the combination of javascript and css

Creating an XPath expression for selecting multiple siblings of a div tag

What specific URL should be included in a JavaScript ajax request?

Is it possible to asynchronously access a JSON object that has been retrieved from a local file on a global scale using the XMLHttpRequest method and

Causing a click event to occur results in crashing the browser

The correct method for creating an external JSON file

Executing PHP function from another PHP file

Exploring the functionalities of can-deactivate without incorporating routing

Angular button press

Is there a way to verify the functionality of DigitalOcean features using doctl before transitioning to a live environment?

"Null" is the value assigned to a JavaScript variable

Tips for adjusting the color of the sidebar in an HTML email template

Pair objects that possess a specific attribute

What is the best way to add a border around an image along with a button using VueJS?

Deactivate the BACKSPACE button

Navigating the browser view across an extensive HTML page without relying on scrollbars

Tips for accessing nested documents from Firebase in React.js

What is the method for adding pages to the ion-nav component in Ionic with Angular?

Each time the Angular children component is reloaded, the user is redirected to localhost:4200