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

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＆amp; 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＆amp; Opera解决方案

您可以同时使用input-placeholder伪元素和border-bottom css属性：

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

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

请注意，它仅适用于：

• Chrome 48+（含-webkit-） - 经过测试
• Opera 36 +
• Safari 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;  
}