combobox-nonnative-when-styled-ref.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<style>

  select { inline-size: 2.5em }

</style>

<div style="position:relative">

<!-- mask the dropdown button -->

<div style="position:absolute; width:50px; left:7px; top:0; bottom:0; background:black;"></div>

<!-- these should make the select non-native -->

<select size="1" style="-moz-appearance: none; border-width: 0"></select><br>

<select size="1" style="-moz-appearance: none; border-width: 1px"></select><br>

<select size="1" style="-moz-appearance: none; border-width: 2px"></select><br>

<select size="1" style="-moz-appearance: none; border-width: 3px"></select><br>

<select size="1" style="-moz-appearance: none; border-width: 4px"></select><br>

<select size="1" style="-moz-appearance: none; border-width: 5px"></select><br>

<select size="1" style="-moz-appearance: none; border-width: 6px"></select><br>

<select size="1" style="-moz-appearance: none; border-style: dotted"></select><br>

<select size="1" style="-moz-appearance: none; border-color: green"></select><br>

<select size="1" style="-moz-appearance: none; background-color: transparent"></select><br>

<select size="1" style="-moz-appearance: none; background-color: white"></select><br>

</div>

<!-- these should let it stay native -->

<select size="1"></select>

<select size="1"></select>