如何使用純css美化select？css美化select的代碼實現

本篇文章給大家帶來的內容是關於如何使用純css美化select？css美化select的代碼實現 ，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

如下：

<h2>Cars Select</h2>    <div class="select">        <select name="cars">            <option value="volvo">Volvo</option>            <option value="saab">Saab</option>            <option value="opel" selected>Opel</option>            <option value="audi">Audi</option>        </select>    </div>

body {font-size: 20px;color: #090;background-color: #eee;text-align: center;}.select {display: inline-block;width: 300px;position: relative;vertical-align: middle;padding: 0;overflow: hidden;background-color: #fff;color: #555;border: 1px solid #aaa;text-shadow: none;border-radius: 4px;transition: box-shadow 0.25s ease;z-index: 2;}.select:hover {box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);}.select:before {content: "";position: absolute;width: 0;height: 0;border: 10px solid transparent;border-top-color: #ccc;top: 14px;right: 10px;cursor: pointer;z-index: -2;}.select select {cursor: pointer;padding: 10px;width: 100%;border: none;background: transparent;background-image: none;-webkit-appearance: none;-moz-appearance: none;}.select select:focus {outline: none;}