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

Published December 8, 2022

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,

webpage with a button

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>

webpage having button with green background color on a keyboard device

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 😃.

Share on: Facebook Twitter