Estoy debatiendo entre usar un<select> o<datalist> para mostrar una lista desplegable desde la cual el usuario puede seleccionar los elementos.

Una desventaja de la<select> La etiqueta es que es inconsistente ya que se presenta de manera diferente en diferentes navegadores: algunos navegadores se muestran con barra de desplazamiento, y para algunos es una lista desplegable.

los<datalist> Por otro lado, parece bueno, pero solo quiero saber si hay alguna forma de deshabilitar la entrada de texto donde el usuario puede escribir lo que quiera en el cuadro de texto si no hace clic en el botón de flecha hacia abajo en el campo de entrada como se muestra :

​<form action="demo_form.asp" method="get">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>

¿Hay alguna forma de deshabilitar la barra de entrada mientras se mantiene la lista desplegable? Intenté el atributo 'readonly' pero eso hace que no se pueda hacer clic en todo.