We're looking for a person or people to help audit MDN to find places we could speed up. Is this you or someone you know? Check out the RFP: https://mzl.la/2IHcMiE

The pointer CSS @media media feature can be used to apply styles based on whether the user's primary input mechanism is a pointing device, and if so, how accurate it is.


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

The primary input mechanism does not include a pointing device.
The primary input mechanism includes a pointing device of limited accuracy.
The primary input mechanism includes an accurate pointing device.



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


input[type="checkbox"]:checked {
  background: gray;

@media (pointer: fine) {
  input[type="checkbox"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border: 1px solid blue;

@media (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 'pointer' in that specification.
Candidate Recommendation Initial definition.

Browser compatibility

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) Edge Internet Explorer Opera Safari
Basic support 41 No support[2] 20 or earlier (12) ? 28 9.0 [1]
Feature Android Chrome for Android 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 including pointer:coarse that replaces non-standard -moz-touch-enabled

See also

Document Tags and Contributors

 Last updated by: Konrud,