Como aplicar readonly em um select?

Para aplicar o atributo “readonly” em um elemento “select” em HTML, você precisa utilizar JavaScript para definir o valor do atributo “disabled” como “true”, e também estilizar o elemento para indicar que está desabilitado.

Aqui está um exemplo de como fazer isso:

HTML:

<select id="meuSelect">
  <option value="opcao1">Opção 1</option>
  <option value="opcao2">Opção 2</option>
  <option value="opcao3">Opção 3</option>
</select>

JavaScript:

window.addEventListener('DOMContentLoaded', function() {
  var meuSelect = document.getElementById('meuSelect');
  meuSelect.disabled = true;
});

CSS:

#meuSelect {
  background-color: #f2f2f2;
  pointer-events: none;
}

No exemplo acima, o evento “DOMContentLoaded” é ouvido para garantir que o script JavaScript é executado somente após o carregamento completo do DOM. O JavaScript obtém a referência do elemento “select” através do seu ID (no caso, “meuSelect”) e define a propriedade “disabled” como “true” para desabilitá-lo. Além disso, um estilo CSS é aplicado para dar um visual de desabilitado ao elemento, alterando a cor de fundo e definindo a propriedade “pointer-events” como “none”, para que o elemento não possa ser selecionado pelo usuário.

Ao implementar esse exemplo, o elemento “select” será exibido desabilitado, não permitindo que o usuário altere a sua seleção.