How to edit the expandable List CSS

Question

This is the actual code, but only changes the style of the button and not the expandable list.

So, how can I edit the list style witch CSS? Also want to quit the blue frameborder...

HTML:

 <table>
              <input class="select" type="hidden" value="COLOR DE FONDO:" placeholder="COLOR DE FONDO DEL DISEÑO">
              <tr>
                <td><select class="select">
                    <option value="" disabled selected>Color de fondo</option>
                    <option value="Blanco">Blanco </option>
                    <option value="Negro">Negro </option>
                    <option value="Rojo">Rojo </option>
                    <option value="Verde">Verde </option>
                    <option value="Azul">Azul </option>
                    <option value="Amarillo">Amarillo </option>
                    <option value="Naranja">Naranja </option>
                    <option value="Rosa">Rosa </option>
                    <option value="Cian">Cian </option>
                  </select></td>
              </tr>
            </table>

CSS:

.select{
border-radius: 30px;
outline: none;
box-shadow: 0px;
border: 0px solid #F0F0F0;
background: #f0f0f0;
width: 400px;
height: 45px;
display: inline-block;
resize: none;
margin: 8px 0;
padding: 12px 20px;
}

Image of how appears