实现纯css美化select的案例？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

效果图如下：

<h3>Cars Select</h3> <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;}

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。