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

【问题标题】：Change colour of placeholder text underline更改占位符文本下划线的颜色
【发布时间】：2016-09-30 14:56:27
【问题描述】：

基本上我在做一个联系表格，文字输入设计如上图。而“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;  
}

&lt;input type="text" name="name" id="name" class="textinput" placeholder=" First Name*"&gt;

【问题讨论】：

目前还没有简单的解决方案，但希望“文本装饰样式”能够被更普遍地接受并使这变得容易：caniuse.com/#search=text-decoration-color

标签： html css input placeholder

【解决方案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 伪元素和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

【讨论】：

谢谢。这就是我想要的，但很伤心，它不适用于 chrome :(
@Eelyn Yep 真可惜.. 这应该不难实现，我希望他们能尽快完成
是的！令人惊讶的是，它不适用于 chrome。或者你有其他解决方案吗？就像不使用文字下划线一样。
@Eelyn 你有最新版本的 chrome 吗？
@tektiv 我刚刚意识到它差不多。我的错，哈哈！因为火狐不同。非常感谢，我已经点击接受这个答案:)

【解决方案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;  
}

【讨论】：