7
respostas

[Dúvida] border não some do elemento select

Ja tentei de tudo para remover a borda de um elemento select, e no curso a borda é removida sem problemas

:root{
    --fonte-principal: #212121;
    --fonte-secundaria: #A4A4A4;
}

.lista-suspensa {
    display: block;
    margin-bottom: 8px;
    font-size: 24px;
    border: none;
}

.lista-supensa label{
    color: var(--fonte-principal);
    display: block;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.lista-supensa select{
    border: none;
    outline: none;
    border-radius: 0;
    background-color: #FFF;
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.2);
    color: var(--fonte-principal);
    font-size: 16px;
    font-weight: 400;
    padding: 30px 21px;
    width: 100%;
    box-sizing: border-box;
}
7 respostas

select é chato de estilizar, já tentou tirar a border das tags option? não sei se da certo

Salve, Eduardo! Consegue compartilhar o código do componente?

em resposta a Andrew : ja tentei e não funcionou mas obrigado

em resposta ao Vinicius : Insira aqui a descrição dessa imagem para ajudar na acessibilidade

e obrigado pela atenção

Eduardo, eu não vi o import './ListaSuspensa.css'... foi mesmo esquecimento ou só não veio aqui para o fórum? :)

Vinicius, o import foi feito corretamente pois o unicos estilo não aplicado foram a remoção das bordas

Na sua primeira mensagem não tinha vindo :)

Então, encontrei o problema.

:root{
    --fonte-principal: #212121;
    --fonte-secundaria: #A4A4A4;
}

.lista-suspensa {
    display: block;
    margin-bottom: 8px;
    font-size: 24px;
    border: none;
}

.lista-suspensa label{ /* nessa linha estava faltando segunso S da palavra suspensa aqui */
    color: var(--fonte-principal);
    display: block;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.lista-suspensa select{ /* nessa linha estava faltando segunso S da palavra suspensa aqui */
    border: none;
    outline: none;
    border-radius: 0;
    background-color: #FFF;
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.2);
    color: var(--fonte-principal);
    font-size: 16px;
    font-weight: 400;
    padding: 30px 21px;
    width: 100%;
    box-sizing: border-box;
}