How to set styles to a webpage if a user's device has a mouse connected using only CSS?

December 7, 2022 - 3 min read

To set styles to a webpage if the user's device has a mouse using only CSS, you can use the @media CSS rule and then use the pointer CSS media feature and set its value as fine. If the user's device or the browsing device has a mouse, the pointer: fine CSS media feature code block will be triggered where you can define the CSS styles to get applied for the mouse.

TL;DR

<!-- A simple webpage with a `button` HTML element -->
<html>
  <style>
    /* Using the `pointer: fine` CSS media feature to set styles for a mouse device */
    @media (pointer: fine) {
      button {
        background-color: green;
        color: white;
      }
    }
  </style>
  <body>
    <button>Click Me</button>
  </body>
</html>

For example, let's say we have a webpage with a button HTML element like this,

<!-- A simple webpage with a `button` HTML element -->
<html>
  <body>
    <button>Click Me</button>
  </body>
</html>

The webpage looks like this,

The above webpage screenshot is from a desktop device. As you can see that the button has a white background color.

Now let's change the color of the button HTML element to a green color when the webpage is opened on a device with a mouse connected to it.

To do that first, we can add the @media CSS media rule with the pointer: fine CSS media feature.

It can be done like this,

<!-- A simple webpage with a `button` HTML element -->
<html>
  <style>
    /* Using the `pointer: fine` CSS media feature to set styles for a mouse device */
    @media (pointer: fine) {
      /* Styles for mouse device can be added here */
    }
  </style>
  <body>
    <button>Click Me</button>
  </body>
</html>

Now to change the color of the button to green color, we can use the background-color CSS property and set its value to green color inside the pointer: fine CSS media feature.

It can be done like this,

<!-- A simple webpage with a `button` HTML element -->
<html>
  <style>
    /* Using the `pointer: fine` CSS media feature to set styles for a mouse device */
    @media (pointer: fine) {
      button {
        background-color: green;
        color: white;
      }
    }
  </style>
  <body>
    <button>Click Me</button>
  </body>
</html>

Now the button background color is changed to green color since the desktop device has a mouse connected to it.

This proves that the CSS media feature is working as expected.

See the above code live in codesandbox.

That's all 😃.