实现纯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美化select的案例-创新互联
文章起源:http://scyanting.com/article/iopdg.html