本篇文章给大家带来的内容是关于如何使用纯css美化select?css美化select的代码实现 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
效果图如下:
Cars Select
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
触发式加载精美特效企业网站源码使用jquery实现了很多精美的触发式加载特效,网站首页在随着访客的滚动条滚动过程中会出现很多触发式加载的特殊效果,让这个网站的风格瞬间显得非常的高大上,让你的企业品牌在访客心中留下更深的影响。当然,我们在使用jquery特效的同时也要注意程序对搜索引擎的友好型,所以这一点儿作者也有考虑到,已经尽可能的对js和css脚本进行精简和优化,尽可能的加快网站加载速度,同时也
立即学习“前端免费学习笔记(深入)”;









