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.
Syntax
The pointer
feature is specified as a keyword value chosen from the list below.
none
- The primary input mechanism does not include a pointing device.
coarse
- The primary input mechanism includes a pointing device of limited accuracy.
fine
- The primary input mechanism includes an accurate pointing device.
Example
HTML
<input id="test" type="checkbox" /> <label for="test">Look at me!</label>
CSS
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; } }
Result
Specifications
Specification | Status | Comment |
---|---|---|
Media Queries Level 4 The definition of '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.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.
See also
Document Tags and Contributors
Tags:
Contributors to this page:
mfluehr,
stephaniehobson,
jbreneman,
alberts+,
cvrebert,
Kimball31,
Sebastianz,
kscarfone,
RufusCSharma
Last updated by:
mfluehr,