僅更改輸入占位符*顏色

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