javascript - 在html中更改占位符字体颜色

Question

<分区>

Answer 1

试试这个:

$(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>