更改占位符文本下划線的顏色

Question

基本上我正在做一個聯系表，如上所示的文本輸入設計。 “名字*”是一個占位符文本。

有誰知道如何將占位符文本下划線更改為與占位符文本不同的顏色。

 input { padding: 3px; border: 1px solid #ddd; } input::-webkit-input-placeholder { color: rgba(251,175,93,1); font-weight: normal; text-decoration: underline; } input::-moz-placeholder { color: rgba(251,175,93,1); font-weight: normal; text-decoration: underline; } input:-moz-placeholder { /* Older versions of Firefox */ color: rgba(251,175,93,1); font-weight: normal; text-decoration: underline; } input:-ms-input-placeholder { color: rgba(251,175,93,1); font-weight: normal; text-decoration: underline; } .textinput{ color: #585857; outline: none; width: 230px; margin: 0 0 15px 0; border: 1px solid #c2c2c2; font-size: 13px; display: block; } 

 <input type="text" name="name" id="name" class="textinput" placeholder=" First Name*"> 

Answer 1

Firefox和Safari解決方案

您可以像這樣使用text-decoration-color css屬性：

input::-moz-input-placeholder {
    font-weight: normal;
    text-decoration: underline;
    text-decoration-color: rgba(251,175,93,1);  
}

結果：
有關更多信息，請參見此提琴

請注意，它僅適用於：

• Firefox 6+（帶有-moz- -）-
• Safari 9+（帶有-webkit- ）

你自己看

---

Chrome＆Opera解決方案

您可以像這樣使用input-placeholder偽元素和border-bottom css屬性：

::-webkit-input-placeholder {
    border-bottom: 1px solid rgba(251,175,93,1);
}

結果：
有關更多信息，請參見此提琴

請注意，它僅適用於：

• Chrome 48+（帶有-webkit- -）-
• 歌劇36+
• Safari 9+

你自己看

---

Answer 2

試試這個有效

 input {
  padding: 3px;
  border: 1px solid #ddd;
}

input::-webkit-input-placeholder {
    color: rgba(9,0,255,1); 
    font-weight: normal;
    text-decoration: underline;  
  text-decoration-color:rgba(255,60,0,1);
}
input::-moz-placeholder {
    color: rgba(9,0,255,1);  
    font-weight: normal;
    text-decoration: underline;
  text-decoration-color:rgba(255,60,0,1);
}
input:-moz-placeholder {   /* Older versions of Firefox */
    color: rgba(9,0,255,1);  
    font-weight: normal;
    text-decoration: underline;
  text-decoration-color:rgba(255,60,0,1);
}
input:-ms-input-placeholder { 
    color: rgba(9,0,255,1); 
    font-weight: normal;
    text-decoration: underline;
  text-decoration-color:rgba(255,60,0,1);
}

.textinput{ 
  color: black; 
  outline: none; 


  width: 230px; 
  margin: 0 0 15px 0; 
  border: 1px solid black; 
  font-size: 13px; 
  display: block;  
}