使用CSS設置輸入字段的占位符

Question

input字段的占位符屬性中是否可能具有HTML效果？ 例如，以下內容可以是輸入字段占位符的輸出嗎？

普通粗體

可以使用帶有::placeholder CSS來自定義::placeholder但是它適用於其中的所有文本。 如何像HTML一樣進行調整？

Answer 1

我想您可以創建一個類似“占位符”的效果來執行您想要的操作。 像這樣：

 .inputBox { position: relative; display: inline-block; } .placeholder { position: absolute; top: 50%; transform: translateY(-50%); left: 2px; width: 100%; height: 100%; pointer-events: none; opacity: 0.85; } .inputBox input:focus+.placeholder { display: none; } .inputBox input:valid+.placeholder { display: none; } 

 <div class="inputBox"> <input type="text" required /> <div class="placeholder"><span style="font-weight: bold">Bold</span> <span>Text</span><!-- your html here --></div> </div>