1
resposta

Modificar os elementos das options do select (HTML E CSS)

Ei pessoal! A dúvida é básica mas no momento não tô conseguindo sair do lugar.

Fiz o campo para seleção (select) em HTML e coloquei 3 options. Mas não consigo estilizar font-family, color e font-size das opções do select com o CSS.

Como deveria ficar:

Botão de seleção - JavaScript selecionado. Como deveria ficar.

Como está:

Botão de seleção - JavaScript selecionado. Como está.

Linhas de código HTML:

                <select id="input-linguagem" class="input-linguagem">
                        <option value="javascript">JavaScript</option>
                        <option value="html">HTML5</option>
                        <option value="css">CSS3</option>
                </select>

Linhas de CSS:

.input-linguagem {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 14px;
    gap: 8px;
    width: 300px;
    height: 56px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    border: none;
}
#input-linguagem {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    position: absolute;
    width: 300px;
    height: 56px;
    left: 1136px;
    top: 388px;
}

Qualquer ajuda é bem vinda hahah

1 resposta

Olá! Neste caso você está utilizando o id e a classe para implementar o css no mesmo elemento. Tente utilizar apenas um dos dois para que não sobrescreva um no outro.