<h1>Background will be red if device can hover or blue if no hover available.</h1>
<select class="js-example-basic-single" name="state">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
<option value="c">Item 3</option>
<option value="d">Item 4</option>
<option value="e">Item 5</option>
<option value="f">Item 6</option>
<option value="g">Item 7</option>
</select>
h1 {
background: blue;
text-align: center;
color: #f9f9f9;
}
/* just for testing below */
@media (any-hover: hover) {
h1 {
background: red;
}
a:hover {
background: yellow;
}
}
const canHover = !matchMedia("(hover: none)").matches;
if (canHover) {
document.body.classList.add("can-hover");
}
$(document).ready(function () {
$(".can-hover .js-example-basic-single").select2();
});