大佬教程收集整理的这篇文章主要介绍了css – 用font-awesome自定义一个选择,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<label class="SELEct"> <SELEct name="email" id="email"> <option>aaaa</option> <option>aaaa</option> <option>aaaa</option> <option>aaaa</option> <option>aaaa</option> <option>aaaa</option> </SELEct> </label>
CSS
.cforms SELEct { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .SELEct { position:relative; display: -moz-inline-stack; display: inline-block; vertical-align: middle; zoom: 1; *display: inline; margin-top:40px; } .SELEct:after { content: "\f0dc"; font-family: FontAwesome; color: #000; padding:8px; position:relative; right:35px; top:0px; BACkground:red; z-index:-1; width:10%; line-height:10%; }
问题
实际上,我的选择附近没有箭头出现.
你能帮我一下吗
我在网上搜索的例子,但我不能使它的工作.
谢谢.
.SELEct { border: 1px solid #ccc; overflow: hidden; height: 40px; width: 240px; position: relative; display: block; } SELEct{ height: 40px; padding: 5px; border: 0; font-size: 16px; width: 240px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .SELEct:after { content:"\f0dc"; font-family: FontAwesome; color: #000; padding: 12px 8px; position: absolute; right: 0; top: 0; BACkground: red; z-index: 1; text-align: center; width: 10%; height: 100%; pointer-events: none; box-sizing: border-box; }
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> <label class="SELEct"> <SELEct name="email" id="email"> <option>aaaa1</option> <option>aaaa2</option> <option>aaaa3</option> <option>aaaa4</option> <option>aaaa5</option> <option>aaaa6</option> </SELEct> </label>
以上是大佬教程为你收集整理的css – 用font-awesome自定义一个选择全部内容,希望文章能够帮你解决css – 用font-awesome自定义一个选择所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。