更改输入占位符*仅颜色 [英] Change input placeholder * color only

问题描述

我有多个输入字段，有些字段是必填，并且必填字段用 * 提及，因此我只需要更改输入占位符 * 的颜色，不更改整个占位符颜色，请在下面的图片中检查我真正需要的颜色.

I have multiple input fields some fields are required and required field mention with * so I need to change input placeholder * color only, not change whole placeholder color check below image what I exactly need.

我已经尝试过以下代码来实现此目的，但它可以更改占位符的整个颜色

I have tried below code to achieve this but it can change whole color of 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>

推荐答案

查看此内容

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

这篇关于更改输入占位符*仅颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！