Change placehloder font color in html

Question

My current output is like below:

I want to change asterix sign color (*) in placeholder, I want output to look like this:

How to do this using jQuery or CSS?

Thanks in advance..

Thanks @Mr_Green for answer , yes you understand my requirement.. — Suresh Suthar, Sep 19 '16 at 06:22
@SidharthGusain Thanks for pointing [my answer](http://stackoverflow.com/a/25907484/1577396). I updated it now with more perfect fiddle :) — Mr_Green, Sep 19 '16 at 06:31

Ehsan · Accepted Answer · 2016-09-19T08:41:12.230

1

Try this:

$(document).ready(function() {
  
  $(".lab").on("click",function(){
    $("#txt").focus();
    })
  
  $("#txt").on("focusout input",function(){
    if($(this).val() == '') {
      $(".lab").css({display:"block"});
      $(this).css({backgroundColor:"rgba(220, 220, 220, 0.3)"})
        }
    
    else {
      $(this).css({backgroundColor:"#fff"});
      $(".lab").css({display:"none"});    
        }     
    })     
})

.d {
  position: relative;
}
#txt {
  position: absolute;
  background-color: rgba(220, 220, 220, 0.3);
  border: 1px solid #000;
 }
.lab {
  position: absolute;
  left: 0px;
}
.star {
  color: aquamarine;
}

<h3>Normal placeholder</h3>
<input type="text" placeholder="Name*">
<h3>My placeholder</h3>
<div class="d"> 
  <input type="text" id="txt" >
  <div class="lab">
    <span class="name">Name</span>
    <span class="star">*</span>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

edited Sep 19 '16 at 08:41

answered Sep 19 '16 at 06:38

Ehsan

12,655
3
25
44

@ehsan still it is same. nothing happens when I click on placeholder text. – Mr_Green Sep 19 '16 at 07:00
@Mr_Green ,in placehpder when content must be hidden , you type something no when you click on it.write `` in your editor and click on it.and see result. – Ehsan Sep 19 '16 at 07:06
@ehsan I understand that and edited my answer. Thanks. But I was talking about your answer. when I click on the placeholder text, I am unable to get focus on the textbox. – Mr_Green Sep 19 '16 at 07:13
This answer does not work. The placeholder is not hidden when you click on the input. – Cerbrus Sep 19 '16 at 07:45
@Cerbrus , in placehpder when content must be hidden , you type something no when you click on it.write `` in your editor and click on it.and see result. – Ehsan Sep 19 '16 at 07:46
@ehsan why are you hanging with the same use case which I already fixed when you said? Cerbrus (and I before) are trying to explain you the different use case, which you haven't covered. Now re-read the comments. – Mr_Green Sep 19 '16 at 07:58
1

@Mr_Green , ok ,i fix it.Thanks. – Ehsan Sep 19 '16 at 08:27
@Cerbrus , Thanks , i fix it. – Ehsan Sep 19 '16 at 08:27
@ehsan: Why are you mangling the snippets like that? Use the proper fields. – Cerbrus Sep 19 '16 at 08:36

score 0 · Answer 2 · answered Sep 19 '16 at 06:08

0

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}

answered Sep 19 '16 at 06:08

Mohit Tanwani

6,608
2
14
32

Thanks for answer but i want to change only * sign color not full place holder text color – Suresh Suthar Sep 19 '16 at 06:09
You can just wrap that in a span like * and provide a class to it. That can be done with jquery – Mohit Tanwani Sep 19 '16 at 06:11
but when i add * in placeholder then input box is not display in page – Suresh Suthar Sep 19 '16 at 06:17
Can't style different color to text using placeholder. – Mr_Green Sep 19 '16 at 06:21

score 0 · Answer 3 · answered Sep 19 '16 at 06:12

0

input[placeholder], [placeholder], *[placeholder] {
   color: #333333;
}
(or)
::-webkit-input-placeholder { color: #333333; opacity: 1 !important; }
:-moz-placeholder { color: #333333;}
::-moz-placeholder {color: #333333;}
:-ms-input-placeholder {color: #333333;}

answered Sep 19 '16 at 06:12

Parthasarathy

308
2
10

Thanks for answer but i want to change only * sign color not full place holder text color – Suresh Suthar Sep 19 '16 at 06:19
Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this". – abarisone Sep 19 '16 at 13:57

Change placehloder font color in html

3 Answers3