any-pointer
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2018.
语法
示例
这个例子为拥有至少一个精确定点装置的用户创建了一个小 checkbox,为拥有至少一个粗略定点装置的用户创建了一个大 checkbox。大 checkbox 的优先级更高,因为它的声明在小 checkbox 的声明后。
HTML
html
<input id="test" type="checkbox" /> <label for="test">Look at me!</label>
CSS
css
input[type="checkbox"]:checked {
background: gray;
}
@media (any-pointer: fine) {
input[type="checkbox"] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
border: 1px solid blue;
}
}
@media (any-pointer: coarse) {
input[type="checkbox"] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
width: 30px;
height: 30px;
border: 2px solid red;
}
}
结果
规范
Specification |
---|
Media Queries Level 4 # any-input |
浏览器兼容性
BCD tables only load in the browser