仅更改输入占位符*颜色

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

检查一下......你可以使用:before and :after和input输入标签来实现你的要求，不支持:before and :after 。 所以你可以通过在输入中添加标签来实现它， :before and :after标记:before and :after给出:before and :after

 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" /> 

信用： 在表单的占位符中添加span

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演示

这里的技巧是使用伪类：

：占位符显示 （ caniuse ）

从规格 ：

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

这里的想法是文本“ 密码* ”来模拟占位符文本。

占位符始终显示在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演示