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

---
  title: How to set styles to a webpage if a user's device has only a keyboard connected to it using CSS?
  published: true
  tags: CSS
  date: Mon Dec 12 2022 10:51:04 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/set-styles-to-webpage-if-users-device-has-only-keyboard-connected-to-it-using-css
  cover_image: https://res.cloudinary.com/df8e3k5he/image/upload/blog/main_09141277a2.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/set-styles-to-webpage-if-users-device-has-only-keyboard-connected-to-it-using-css)
  To set styles if the user's device has only a keyboard connected to it using CSS, you can use the `@media` CSS rule and then use the `pointer` CSS media feature and set its value as `none`. If the user's device or the browsing device only has a keyboard as the primary input, the `pointer: none` CSS media feature code block will be triggered where you can define the CSS styles to get applied for the keyboard.

### TL;DR

```html
<!-- A simple webpage with a `button` HTML element -->
<html>
  <style>
    /* Using the `pointer: none` CSS media feature to set styles for a keyboard device */
    @media (pointer: none) {
      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_baa8a3cc9a.png)

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

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 keyboard connected to it.

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

It can be done like this,

```html
<!-- A simple webpage with a `button` HTML element -->
<html>
  <style>
    /* Using the `pointer: none` CSS media feature to set styles for a keyboard device */
    @media (pointer: none) {
      /* Styles for keyboard 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: none` CSS media feature.

It can be done like this,

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

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

The above screenshot is from a device that has only a keyboard connected to it as the primary input. As you can see that the `button` background color is changed to `green` color which proves that the CSS media feature is working as expected.

See the above code live in [codesandbox](https://codesandbox.io/s/set-styles-to-webpage-if-users-device-has-only-keyboard-connected-to-it-using-css-syzi17?file=/index.html).

That's all 😃.