更改占位符文本下划线的颜色

Question

基本上我在做一个联系表，文本输入设计如上图。 "First Name*" 是一个占位符文本。

有谁知道如何将占位符文本下划线更改为与占位符文本不同的颜色。

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);  
}

结果：
有关详细信息，请参阅 this fiddle

请注意，它仅适用于：

Firefox 6+（-moz-）- 测试
Safari 9+（-webkit-）

See for yourself

Chrome & Opera 解决方案

您可以像这样同时使用 input-placeholder pseudo-element 和 border-bottom css 属性 :

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

结果：
有关详细信息，请参阅 this fiddle

请注意，它仅适用于：

Chrome 48+（-webkit-）- 已测试
歌剧 36+
野生动物园 9+

See for yourself

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;  
}

更改占位符文本下划线的颜色

Change colour of placeholder text underline

html

css

input

placeholder

Firefox 和 Safari 解决方案

Chrome & Opera 解决方案