Question

我有多个输入字段，某些字段为*，并且需要*字段提及，因此我只需更改输入占位符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; }颜色，不更改整个占位符颜色< / strong>查看下图，我确切需要什么。

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

＆＃13;
＆＃13;
<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>
＆＃13;
<rule name="Item Detail"> <match url="^item/([_0-9a-z-()@$!']+)" /> <conditions> <add input="{REQUEST_URI}" pattern="(action/edit)|(action/preview)" negate="true" /> </conditions> <action type="Rewrite" url="item?item={R:1}" appendQueryString="false" /> </rule>
＆＃13;
＆＃13;
＆＃13;

Answer 1

选中此项...您可以使用: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 2

只有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 3

请参阅：

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

也许您可以在占位符中使用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 5

试试这个：

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 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]中。 ：占位符显示伪类与输入匹配显示此类占位符文本的元素。

这里的想法是将文字“密码* ”转换为模拟占位符文字。

占位符始终显示在input元素上 - 即使它们是聚焦的 - 除非对它们设置了值。

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

这是键选择器：

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>

仅更改输入占位符*颜色

6 个答案:

Codepen demo

:placeholder-shown（caniuse）

的 Codepen demo