Change input placeholder * color only

Question

I have several input fields, some required and required fields are mentioned with * , so I only need to change the color of the placeholder * , not change the entire color of the placeholder . what I need.

I tried to make the code below to achieve this, but it can change the entire color of the placeholder.

 div { margin:10px 0px; } input { width: 200px; border: none; border-bottom: solid 1px #8d97a0; padding: 5px; border-radius: 0; background: #fff; box-shadow: none; } ::-webkit-input-placeholder { color:red; } 

 <div> <input type="name" name="name" id="name" placeholder="Name *"> </div> <div> <input type="Email" name="email" id="email" placeholder="Email"> </div> <div> <input type="phone" name="phone" id="phone" placeholder="Phone"> </div> <div> <input type="password" name="password" id="password" placeholder="Password *"> </div> 

Answer 1

Check this ... You can fulfill your requirement with :before and :after , and there is no support for :before and :after for the input tag. That way you can do this by adding a shortcut to your input and giving :before and :after CSS to indicate

 input { width: 160px; } input[required] + label { color: #999; font-family: Arial; font-size: .8em; position: relative; left: -166px; /* the negative of the input width */ } input[required] + label:after { content:'*'; color: red; } /* show the placeholder when input has no content (no content = invalid) */ input[required]:invalid + label { display: inline-block; } /* hide the placeholder when input has some text typed in */ input[required]:valid + label{ display: none; } 

 <input type="password" id="name" name="name" required="required" /> <label for="name">Password</label> 

Answer 2

Just a placeholder will not give different styles . If you need a different style, you need to separate it.

 input { width: auto; } input + label { color: #999; font-family: Arial; font-size: .8em; position: relative; left: -166px; } input[required] + label:after { content:'*'; color: red; } input[required]:invalid + label { display: inline-block; } input[required]:valid + label{ display: none; } 

 <div> <input type="text" id="name" name="name" required="required" /> <label for="name">Password</label> </div> 

Answer 3

See this:

 $(document).ready(function(){ $('.colorHolder').click(function(){ $('.havePlace',this).focus(); }) $('.havePlace').on('input',function(){ var len = ($(this).val()).length; if (len) $(this).next('label').hide(); else $(this).next('label').show(); }) }) 

 input { width: 150px; border: none; border-bottom: solid 1px #8d97a0; padding: 5px; border-radius: 0; background: #fff; box-shadow: none; outline: none; } .colorHolder { position: relative; margin-bottom: 20px; display:inline-block; } .colorHolder .havePlace + label { position: absolute; left: 7px; bottom: 2px; color: #CCC; cursor: text; } .colorHolder .havePlace + label:after { content: '*'; color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="colorHolder"> <input type="password" name="password" class="havePlace"> <label>Password </label> </div> <div class="colorHolder"> <input type="email" name="email" class="havePlace"> <label>Email </label> </div> <div class="colorHolder"> <input type="text" name="text" class="havePlace"> <label>Text </label> </div> 

Answer 4

maybe you can use span in placeholder so you can change color *

 $(function() { $(".holder + input").keyup(function() { if($(this).val().length) { $(this).prev('.holder').hide(); } else { $(this).prev('.holder').show(); } }); $(".holder").click(function() { $(this).next().focus(); }); }); 

 .holder { position: absolute; margin: 5px 5px; cursor: auto; font-size: 11pt; z-index: 1; } .red{ color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="holder">Email Adress <span class="red">*</span></div> <input id="input" size="18" type="text" /> 

credits: Add a space inside the form filler

Answer 5

Try the following:

 label { display: inline-block; width:100%; background: linear-gradient(to right, #999 6em, red 5em); border: 2px solid #ccc; font-family: monospace;/* less surprise about length of text at screen */ } input { font-weight: bold; width: 100%; height:20px; padding:10px; border: none; display: block; outline:none; } input:invalid {/* color part of text only when placeholder is shown */ mix-blend-mode: screen; } 

 <label> <input placeholder="Password *" required /> </label> 

Answer 6

With the current markup, I don't think this is possible only with CSS, but:

This is possible if it allows you to add a label element after input - for example:

 <div> <input type="password" name="password" id="password" placeholder=" " /> <label for="password">Password</label> </div> 

Codepen Demo

The trick here is to use a pseudo-class:

: placeholder-shown ( caniuse )

From specification :

Input elements can sometimes display placeholder text as a hint to the user about what to enter. See, for example, the placeholder attribute in [HTML5]. Under the alias : placeholder-shown corresponds to an input element that displays such placeholder text.

The idea here is the text " Password * " to simulate the placeholder text.

Placeholders always appear on input elements - even if they are focused - if no value is set on them.

Using the pseudo-class :placeholder-shown on input - we can determine when to display the label text.

This is the key selector:

 input:placeholder-shown + label { display: block; } 

This means: when the input pointer is displayed, the "placeholder" label is displayed. (otherwise we will hide it)

For this reason, we still need to set the non-stationary placeholder attribute on the input (a simple space is enough)

 div { position: relative; } label { position: absolute; height: 20px; left: 5px; top: 0; bottom: 0; margin: auto; display: none; pointer-events: none; color: #757575; font-size: 16px; font-family: system-ui; } label:after { content: " *"; color: red; } input:placeholder-shown + label { display: block; } input { width: 200px; border: none; border-bottom: solid 1px #8d97a0; padding: 5px; border-radius: 0; background: #fff; box-shadow: none; height: 20px; font-size: 16px; margin: 5px 0; } 

 <div> <input type="password" name="name" id="name" placeholder=" " /> <label for="name">Name</label> </div> <div> <input type="password" name="name" id="name" placeholder="Email" /> </div> <div> <input type="password" name="name" id="name" placeholder="Phone" /> </div> <div> <input type="password" name="password" id="password" placeholder=" " /> <label for="name">Password</label> </div> 

Codepen Demo