一個占位符中是否可能有多種文本顏色？

Question

我想要一個帶有多個彩色文本的占位符。是否可以幫助我。

我有一個輸入文本，其中占位符表示我是個好男孩。 我想要顏色不同的好詞。

Answer 1

否 ，無法為默認占位符着色，但是您可以創建類似於占位符的元素。 因此，您可以為字母着色。 這是默認占位符的解決方法。

請注意，我使用的是opacity: 0.5 ，您可以根據需要進行更改。

---

的HTML

 
   
   
    
    .input-field { position: relative; display: inline-block; } .input-field > label { position: absolute; left: 0.5em; top: 50%; margin-top: -0.5em; opacity: 0.5; } .input-field > input[type=text]:focus + label { display: none; } .input-field > label > span { letter-spacing: -2px; } .first-letter { color: red; } .second-letter { color: blue; } .third-letter { color: orange; } .fourth-letter { color: green; } .fifth-letter { color: yellow; }
   
    

 
   
   
    
     <div class="input-field"> <input id="input-text-field" type="text"></input> <label for="input-text-field"> <span class="first-letter">H</span> <span class="second-letter">E</span> <span class="third-letter">L</span> <span class="fourth-letter">L</span> <span class="fifth-letter">O</span> </label> </div>
   
    

工作小提琴

---

更新：

僅CSS（ 帶有:placeholder-shown ）

上面的小提琴有一個錯誤 ，那就是當您在文本框中鍵入內容並單擊外部時，占位符在輸入的文本上方再次可見。

因此，要使其完美，我們可以使用:placeholder-shown ，除了chrome和firefox之外，它並沒有太多支持。

這是代碼：

 .input-field { position: relative; display: inline-block; } .input-field > label { position: absolute; left: 0.5em; top: 50%; margin-top: -0.5em; opacity: 0.5; display: none; } .input-field > input[type=text]:placeholder-shown + label { display: block; } .input-field > label > span { letter-spacing: -2px; } .first-letter { color: red; } .second-letter { color: blue; } .third-letter { color: orange; } .fourth-letter { color: green; } .fifth-letter { color: yellow; } 

 <div class="input-field"> <input id="input-text-field" type="text" placeholder=" "></input> <label for="input-text-field"> <span class="first-letter">H</span> <span class="second-letter">E</span> <span class="third-letter">L</span> <span class="fourth-letter">L</span> <span class="fifth-letter">O</span> </label> </div> 

工作小提琴

使用JS（ 不帶:placeholder-shown ）：

 addListenerMulti(document.getElementById('input-text-field'), 'focus keyup', blurme); function blurme(e) { var element = e.currentTarget; element.classList[(element.value.length !== 0) ? "add" : "remove"]('hide-placeholder'); } function addListenerMulti(el, s, fn) { s.split(" ").forEach(function(e) { return el.addEventListener(e, fn, false) }); } 

 .input-field { position: relative; display: inline-block; } .input-field > label { position: absolute; left: 0.5em; top: 50%; margin-top: -0.5em; opacity: 0.5; } .hide-placeholder + label { display: none; } .input-field > label > span { letter-spacing: -2px; } .first-letter { color: red; } .second-letter { color: blue; } .third-letter { color: orange; } .fourth-letter { color: green; } .fifth-letter { color: yellow; } 

 <div class="input-field"> <input id="input-text-field" type="text"></input> <label for="input-text-field"> <span class="first-letter">H</span> <span class="second-letter">E</span> <span class="third-letter">L</span> <span class="fourth-letter">L</span> <span class="fifth-letter">O</span> </label> </div> 

工作小提琴

Answer 2

CSS可以幫助您（尚不支持IE）。 mix-blend-mode + gradient和background分派在2個容器中。

我只在顯示placeholder時才使用required （屬性）和:invalid （CSS）來觸發效果。

有關信息，請查看：

示例（適用於處理mix-blend-mode瀏覽器）

 input { font-family:monospace; vertical-align:middle; font-size:2em; } input:invalid { mix-blend-mode:screen; text-shadow:0 0 1px black,0 0 1px black,0 0 1px black,0 0 1px black,0 0 1px black; /* increase visibility */ } label { background:repeating-linear-gradient(to right, pink 10%, blue 10%, blue 20%, purple 20%, purple 30%, red 30%, red 40%, green 40%, green 50%, turquoise 50%, turquoise 60%) left ; background-size: 10em 400px; } 

 <form> <label><input type="text" required placeholder="show me colors"/></label> </form> 

仍使用圖像背景和漸變的另一個示例： http : //codepen.io/gc-nomade/pen/WwgzVv