:-ms-input-placeholder
:-ms-input-placeholder
非标准
这个功能是非标准的,不在标准规范上。不要在面向Web的生产站点上使用它:它不适用于每个用户。实现之间也可能存在大的不兼容性,并且该功能的行为在未来可能会发生改变。
非标准的私有:-ms-input-placeholder
伪类表示表单元素的占位符文本。这允许web开发人员和主题设计人员定制占位符文本的外观。这个伪类只支持Internet Explorer和Microsoft Edge。
例
以下示例使用自定义样式突出显示Branch和ID代码字段。在该字段具有焦点前,占位符文本以指定的样式显示,暗示可以向该字段输入字符。当该字段获得焦点时,它将变回输入字段的正常样式,占位符文本消失。
HTML
<form id="test">
<p><label>Enter Student Name: <input id="name" placeholder="Student Name"/></label></p>
<p><label>Enter Student Branch: <input id="branch" placeholder="Student Branch" /></label></p>
<p><label>Enter Student ID: <input type="num" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id" /></label></p>
<input type="submit" />
</form>
CSS
input {
background-color:#E8E8E8;
color:black; }
/* placeholder only style */
input.studentid:-ms-input-placeholder {
font-style:italic;
color: red;
background-color: yellow;
}
结果
规范
不属于任何规范,但Microsoft对MSDN上的说明进行了阐述(https://msdn.microsoft.com/en-us/library/hh772745(v = vs.85%29.aspx)
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | No support | No support | No support | 10 | No support | No support |
Feature | Android | Firefox Mobile (Gecko) | Firefox OS | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | No support | No support | No support | (Yes) | No support | No support |