Problem styling <select> through CSS

Question

Hello!

I’ve put together a form for lead capture, and I’m having trouble styling the field within it. I’ve done a lot of research and tried everything, but I can’t figure out why it’s not working.

The page is as follows: https://superalitoral.com.br/teste/

Form code:

<form id="formulario" action="" method="get">
    <input type="hidden" id="unidade" name="unidade" value="281">
    <input type="hidden" id="chave" name="chave" value="739164197">
<div width="100%">
    <input type="text" id="nome" name="nome" class="campos" placeholder="Seu nome" required>
</div>
<div width="100%">
    <input type="text" id="email" name="email" class="campos" placeholder="Seu e-mail" required>
<div width="100%">
    <input type="tel" id="telefone" name="telefone" class="campos" placeholder="Seu celular" required>
</div>    
<div width="100%" class="motivo">
    <select id ="observacoes" name="observacoes">
    <option value="Opção 1">Opção 1</option>
    <option value="Opção 2">Opção 2</option>
    <option value="Opção 3">Opção 3</option>
    </select>
</div>
<div width="100%" align="center">
    <button onClick="form()" id="enviar" name="enviar" type="submit" class="btn-enviar">Enviar</button>
</div>
</form>

Class "reason":

.motivo select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
    font-family: "Nunito Sans";
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.5px;
    background-color: #ECDAB2;
    color: #C55300;
    border-radius: 8px;
    border: 0px;
    padding: 20px;
    margin-bottom: 20px;
}

I have tried to include "! Important" after the lines, but apparently it doesn’t work. Also, it excludes all references to select that you had in the original css of the theme.

Other than that, I’m not understanding why is appearing a text input in the selection - I would like to leave closed among the options I will provide.

Somebody’s got a hunch?

Answer 1

This is not a custom SELECT, it is an alternative element SIMULATED, it is not the real SELECT that this there, is a series of elements in a plugin that simulate SELECT, the original select this hidden, no use applying CSS, the plugin used is this https://select2.org/ he transformed it:

<div width="100%" class="motivo">
    <select id ="observacoes" name="observacoes">
    <option value="Opção 1">Opção 1</option>
    <option value="Opção 2">Opção 2</option>
    <option value="Opção 3">Opção 3</option>
    </select>
</div>

In this (dynamically):

<div width="100%" class="motivo" data-select2-id="4"> <select id="observacoes" name="observacoes" placeholder="Selecione um motivo..." data-select2-id="observacoes" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true"><option value="Opção 1" data-select2-id="2">Opção 1</option><option value="Opção 2" data-select2-id="5">Opção 2</option><option value="Opção 3" data-select2-id="6">Opção 3</option> </select><span class="select2 select2-container select2-container--default select2-container--below select2-container--focus" dir="ltr" data-select2-id="1" style="width: 100%;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-observacoes-container"><span class="select2-selection__rendered" id="select2-observacoes-container" role="textbox" aria-readonly="true" title="Opção 1">Opção 1</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span></div>

See that it has been applied class=select2-hidden-accessible by hiding the original SELECT

Just remove such Select2 from the page and all its references in scripts that you should resolve