仅更改输入占位符 * 颜色

Posted 2023-03-05

【中文标题】仅更改输入占位符 * 颜色

【英文标题】：Change input placeholder * color only

【发布时间】：2018-04-12 05:06:55

【问题描述】：

我有多个输入字段，有些字段是 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>

【参考方案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>

【讨论】：

我已经尝试过了，但我不必在输入中使用标签和必需

【参考方案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>

【讨论】：

我也试过了，但我不必在输入中使用 label 和 required

考虑为该标签指定竖条光标，以与用户将光标悬停在输入字段上时所看到和期望的内容保持一致。

【参考方案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>

【参考方案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>

【讨论】：

需要所有* 出现在结束而不是开始。我需要上面我上传的图片，你改变了 UI

【参考方案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

【参考方案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

【讨论】：

谢谢你的回答，但我不能用这个我有多个字段，所有字段都不是required[*]

这个和required没有关系，唯一的问题是能不能在input后面多加一个元素

谢谢！但是占位符和标签看起来不一样将电话替换为密码然后你可以明白我的意思所以请你检查一下。

我尝试更改 font-size 占位符和标签，但仍然不一样