How can I create a hex number picker with html?

I need an input element to input base 16 numbers on a website. The user should be able to easily understand, that this is an input for base16 numbers and be able to choose the exact value he needs. Also it is not always one byte, the range is something unknown between 1 and 16 bit.

I have thought of three possible ways and I hate all of them: https://jsfiddle.net/7npjoazt/84/

<!-- FIRST EXAMPLE: text field that only allows valid hex input -->
0x<input type="text" id="firstinput" style="width:20px">

<!-- SECOND EXAMPLE: number input with hex overlay, styling is just for testing :) -->
<input type="number" min=0 max=255 step=1 onchange="update_hex_overlay(this.value);">
<span id="hex_overlay"></span>

<!-- THIRD EXAMPLE: slider with hex values -->
<input type="range" min=0 max=255 onchange="update_hex_extra(this.value);"><br>
<span id="hex_extra"></span>

Does anyone have a good idea on how to create an input element where the user can input a base 16 numbers?

Thanks