如何使用纯css美化select?css美化select的代码实现
程序员文章站
2022-03-13 21:50:20
...
本篇文章给大家带来的内容是关于如何使用纯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; }
相关推荐:
css美化、优化、合并工具推荐_html/css_WEB-ITnose
js+css实现select的美化效果_javascript技巧
以上就是如何使用纯css美化select?css美化select的代码实现的详细内容,更多请关注其它相关文章!
推荐阅读
-
select下拉选择框美化实现代码(js+css+图片)
-
使用CSS计数器美化数字有序列表的实现方法
-
css3 实现滚动条美化效果的实例代码
-
使用CSS和jQuery模拟select并附提交后取得数据的代码
-
如何做到不用图片用css实现按钮的美化
-
如何使用纯CSS3美化单选按钮radio的示例代码分享
-
如何使用CSS实现鼠标上移图标旋转效果的图文代码详解
-
CSS3如何实现文字向右循环闪过效果以及可在移动端使用的实例代码分享
-
css3 | 中的animation/@keyframes xz动画效果-如何使用纯css实现动画效果? 用法:animation:xz 3s 2 4s alternate; 参数:animati
-
CSS3如何实现文字向右循环闪过效果以及可在移动端使用的实例代码分享