CSS

:-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)

浏览器兼容性

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic supportNo supportNo supportNo support10No supportNo support

FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic supportNo supportNo supportNo support(Yes)No supportNo support