How to set styles to a webpage if a user's device has a mouse connected using only CSS?
Tags: css
Published: 2022-12-12 05:21:34

---
  title: How to set styles to a webpage if a user's device has a mouse connected using only CSS?
  published: true
  tags: CSS
  date: Mon Dec 12 2022 10:51:34 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/set-styles-to-webpage-if-users-device-has-mouse-connected-to-it-using-only-css
  cover_image: https://res.cloudinary.com/df8e3k5he/image/upload/blog/main_14358ee2cc.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/set-styles-to-webpage-if-users-device-has-mouse-connected-to-it-using-only-css)
  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

```html
<!-- 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,

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

The webpage looks like this,

![webpage with a button](/uploads/Screenshot_2022_12_07_at_3_02_54_PM_d20ee9abd7.png)

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,

```html
<!-- 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,

```html
<!-- 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>
```

![webpage having button with green background color on a mouse device](/uploads/Screenshot_2022_12_07_at_2_44_50_PM_33856ef576.png)

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](https://codesandbox.io/s/set-styles-if-users-device-has-mouse-connected-to-it-using-only-css-qt5nyu?file=/index.html).

That's all 😃.