在html中更改占位符字体颜色[重复]答案

【问题标题】：Change placehloder font color in html [duplicate]在html中更改占位符字体颜色[重复]
【发布时间】：2017-01-26 17:46:48
【问题描述】：

我目前的输出如下：

我想更改占位符中的星号颜色 (*)，我希望输出如下所示：

如何使用 jQuery 或 CSS 做到这一点？

提前谢谢..

【问题讨论】：

感谢@SidharthGusain，我认为它对我有用
感谢@Mr_Green 的回答，是的，您了解我的要求..
@SidharthGusain 感谢您指点my answer。我现在用更完美的小提琴更新了它:)
如果我的问题是有效的，那么请任何人投票给我的问题

标签： javascript jquery css html

【解决方案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>

【讨论】：

@ehsan 还是一样。当我点击占位符文本时没有任何反应。
@Mr_Green，当内容必须被隐藏时，在地方hpder，当你点击它时输入一些no。在你的编辑器中写<input type="text" placeholder="Name*">然后点击它。然后查看结果。
@ehsan 我明白这一点并编辑了我的答案。谢谢。但我说的是你的回答。当我点击占位符文本时，我无法将注意力集中在文本框上。
这个答案不起作用。单击输入时，占位符不会隐藏。
@Mr_Green，好的，我修好了。谢谢。

【解决方案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;
}

【讨论】：

感谢您的回答，但我只想更改 * 标志颜色不是完整的占位符文本颜色
您可以将其包装在像 * 这样的跨度中并为其提供一个类。这可以用jquery来完成
但是当我在占位符中添加 * 然后输入框不显示在页面中
无法使用占位符为文本设置不同颜色的样式。

【解决方案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;}

【讨论】：

感谢您的回答，但我只想更改 * 标志颜色不是完整的占位符文本颜色
请编辑更多信息。不建议使用纯代码和“试试这个”的答案，因为它们不包含可搜索的内容，也没有解释为什么有人应该“试试这个”。