MDN will be in maintenance mode on Thursday September 21st, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

The any-pointer CSS @media media feature can be used to apply styles based on whether any available input mechanism is a pointing device, and if so, how accurate it is.


The any-pointer feature is specified as a keyword value chosen from the list below.

No pointing device is available.
At least one input mechanism includes a pointing device of limited accuracy.
At least one input mechanism includes an accurate pointing device.

Note: More than one value can match if the available devices have different characteristics, although none only matches when none of them are pointing devices.



<input id="test" type="checkbox" />
<label for="test">Look at me!</label>


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 Status Comment
Media Queries Level 4
The definition of 'any-pointer' in that specification.
Working Draft Initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Basic support 41 No support[2] 20 or earlier (12) Nightly build 28 9 [1]
Feature Android Chrome for Andorid Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support 50 No support[2] 36 ? 9.2

[1]: Implemented in WebKit bug #134822.

[2]: bug 1035774 – Implement Interaction Media Features

See also

Document Tags and Contributors

 Contributors to this page: mfluehr, alberts+, Druzion, cvrebert, Sebastianz, dannyfritz, kscarfone, jpmedley
 Last updated by: mfluehr,