在html中更改placehloder字体颜色

Question

我目前的输出如下：

https://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.itemssource(v=vs.110).aspx

我想在占位符中更改asterix符号颜色（*），我希望输出看起来像这样：

如何使用jQuery或CSS执行此操作？

提前致谢..

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>

Answer 2

::-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;
}

Answer 3

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;}