Modify the select style

select Default style

Take Google browser for example

       <select>
            <option value="1"> Apple </option>
            <option value="2"> Snow pear </option>
            <option value="3"> Peach </option>
            <option value="4"> strawberry </option>
        </select>

select Change the default style

      select {
    
        width: auto;
        border: 1px solid #e5e5e5;
        outline: none; /* Remove ugly thick black lines */
        padding: 4px 24px 4px 10px;
        font-size: 16px;
      }
      option {
    
      	/* You can set the background color and font color */
        color: #ea5400;
        font-size: 14px;
      }
      option:hover {
    
        /* All invalid */
      }
      option:checked {
    
        color: #fff;
        background: rgb(128, 64, 99);
      }

design sketch ：

You can give select Label use appearance: none Hide the drop-down arrow , And use the absolute positioning custom drop-down arrow to achieve the beautification effect

It is recommended to use div The label realizes the drop-down box effect , This is more controllable