仅更改输入占位符 * 颜色

Question

我有多个输入字段，有些字段是 required，而必填字段用 * 提及，所以我只需要更改输入占位符 * 的颜色，不更改整个占位符颜色检查下图我到底需要什么。

我已经尝试下面的代码来实现这一点，但它可以改变占位符的整个颜色

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>

Answer 1

只是placeholder不会给出不同的styles。如果你想要不同的风格，你需要像这样分开。

input {
    width: auto;
}

input + label {
    color: #999;
    font-family: Arial;
    font-size: .8em;
    position: relative;
    left: -166px; 
}

input[required] + label:after {
    content:'*';
    color: red;
}


input[required]:invalid + label {
    display: inline-block;
}

input[required]:valid + label{
    display: none;
}

<div>
  <input type="text" id="name" name="name" required="required" />
  <label for="name">Password</label>
</div>

Answer 2

检查这个...您可以使用:before and :after 来满足您的要求，并且对于输入标签，不支持:before and :after。因此，您可以通过在输入中添加标签并将:before and :after CSS 给标签来做到这一点

input {
    width: 160px;
}

input[required] + label {
    color: #999;
    font-family: Arial;
    font-size: .8em;
    position: relative;
    left: -166px; /* the negative of the input width */
}


input[required] + label:after {
    content:'*';
    color: red;
}
/* show the placeholder when input has no content (no content = invalid) */
input[required]:invalid + label {
    display: inline-block;
}

/* hide the placeholder when input has some text typed in */
input[required]:valid + label{
    display: none;
}

<input type="password" id="name" name="name" required="required" />
    <label for="name">Password</label>

Answer 3

试试这个：

label {
  display: inline-block;
  width:100%;
  background: linear-gradient(to right, #999 6em, red 5em);
  border: 2px solid #ccc;
  font-family: monospace;/* less surprise about length of text at screen */
}
input {
  font-weight: bold;
  width: 100%;
  height:20px;
  padding:10px;
  border: none;
  display: block;
outline:none;

}
input:invalid {/* color part of text only when placeholder is shown */
  mix-blend-mode: screen;
}

<label>
  <input placeholder="Password *" required />
</label>

Answer 4

看这个：

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

Answer 5

也许你可以在占位符中使用 span，这样你就可以改变 * 的颜色

$(function() {
    $(".holder + input").keyup(function() {
        if($(this).val().length) {
            $(this).prev('.holder').hide();
        } else {
            $(this).prev('.holder').show();
        }
    });
    $(".holder").click(function() {
        $(this).next().focus();
    });
});

.holder {
position: absolute;
margin: 5px 5px;
cursor: auto;
font-size: 11pt;
z-index: 1;
}
.red{
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">Email Adress <span class="red">*</span></div>
<input id="input" size="18" type="text" />

学分：Add span inside form's placeholder

Answer 6

对于当前的标记，我认为仅使用 CSS 是不可能的，但是：

如果可以在输入后添加label 元素，这是可能的 - 像这样：

<div>
  <input type="password" name="password" id="password" placeholder=" " />
  <label for="password">Password</label>
</div>

Codepen demo

这里的技巧是使用伪类：

:placeholder-shown (caniuse)

来自the spec：

输入元素有时可以显示占位符文本作为提示 用户输入的内容。例如，请参见占位符属性 在 [HTML5] 中。 :placeholder-shown 伪类匹配输入 显示此类占位符文本的元素。

这里的想法是让文本“Password *”模拟占位符文本。

占位符总是显示在input 元素上——即使它们被聚焦——除非在它们上设置了值。

通过在input 上使用:placeholder-shown 伪类 - 我们可以确定何时显示标签文本。

这是键选择器：

input:placeholder-shown + label {
  display: block;
}

这意味着：当显示输入的占位符时 - 显示“占位符”标签。 （否则我们隐藏它）

出于这个原因，我们仍然需要在输入上设置一个非空的占位符属性（一个简单的空格就足够了）

div {
  position: relative;
}
label {
  position: absolute;
  height: 20px;
  left: 5px;
  top: 0;
  bottom: 0;
  margin: auto;
  display: none;
  pointer-events: none;
  color: #757575;
  font-size: 16px;
  font-family: system-ui;
}
label:after {
  content: " *";
  color: red;
}
input:placeholder-shown + label {
  display: block;
}
input {
  width: 200px;
  border: none;
  border-bottom: solid 1px #8d97a0;
  padding: 5px;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  height: 20px;
  font-size: 16px;
  margin: 5px 0;
}

<div>
  <input type="password" name="name" id="name" placeholder=" " />
  <label for="name">Name</label>
</div>

<div>
  <input type="password" name="name" id="name" placeholder="Email" />
</div>

<div>
  <input type="password" name="name" id="name" placeholder="Phone" />
</div>

<div>
  <input type="password" name="password" id="password" placeholder=" " />
  <label for="name">Password</label>
</div>

Codepen demo