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