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

December 8, 2022 - 3 min read

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

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

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

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

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

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.

That's all 😃.