The pointer CSS media feature tests whether the user has a pointing device (such as a mouse), and if so, how accurate the primary pointing device is.

Note: If you want to test the accuracy of any pointing device, use any-pointer instead.


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.


This example creates a small checkbox for users with fine primary pointers and a large checkbox for users with coarse primary pointers.


<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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support4112 No1 ?289
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ?5012 No1289.2 ?

1. See bug 1035774.

See also

Document Tags and Contributors

Last updated by: mfluehr,