非标准
该特性是非标准的,请尽量不要在生产环境中使用它!
::-ms-check这个css伪类是微软扩展的用以表达
checkboxes 和 radio 的勾选状态,其中 checkboxes 和 radio分别通过 <input type="checkbox"> 和 <input type="radio">创建
只有IE浏览器和微软Edge浏览器支持该伪类。
属性支持性
只有以下css属性可以在选择器里使用 ::-ms-check
伪类. 其他属性会被自动忽略
background-clip
background-color
background-image
background-origin
background-repeat
background-size
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-left-color
border-left-style
border-left-width
border-right-color
border-right-style
border-right-width
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
box-shadow
box-sizing
color
cursor
display
(valuesblock
,inline-block
,none
)@font-face
font-size
font-style
font-weight
height
margin-bottom
margin-left
margin-right
margin-top
-ms-background-position-x
-ms-background-position-y
-ms-high-contrast-adjust
opacity
outline-color
outline-style
outline-width
padding-bottom
padding-left
padding-right
padding-top
transform
transform-origin
visibility
width
语法
::-ms-check
例子
HTML
<form>
<label for="redButton">Red</label>
<input type="radio" id="redButton"><br>
<label for="greenCheckbox">Green</label>
<input type="checkbox" id="greenCheckbox">
</form>
CSS
input, label {
display: inline;
}
input[type=radio]::-ms-check {
border-color: red; /* This will make the border red when the button is checked. */
color: red; /* This will make the circle red when the button is checked. */
}
input[type=checkbox]::-ms-check {
border-color: green; /* This will make the box green when the button is checked. */
color: green; /* This will make the checkmark green when the button is checked. */
}
结果
可以尝试下面的例子, 左边的截屏显示当用户不在ie浏览器或Edge浏览器上运行时勾选上按钮时的情况
Screenshot | Live sample |
---|---|
详述
无
浏览器兼容性
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 未实现 | 未实现 | 10.0 | 未实现 | 未实现 |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | iOS WebKit |
---|---|---|---|---|---|---|---|
Basic support | 未实现 | 未实现 | 未实现 | 未实现 | ? | 未实现 | 未实现 |