<div class="styled-select"> <select> <option>Here is the first option</option> <option>The second option</option> </select></div>//下拉
箭头保持不变。没有直接美化它的方式,但解决方案还是非常简单的,首先我们需要用一个div容器包裹在select元素外围styled-select { width: 240px; height: 34px; overflow: hidden; background: url(new_arrowpng) no-repeat right #ddd;}/下一步我们需要加入一些css,以确保选择框元素被以某种方式美化:我们需要确保选择框的跨度比外围的div容器更宽,这样默认的下拉箭头
就会消失(选择框比外面的div宽大,默认的下拉箭头就会被隐藏)我们的div容器需要被美化成新的下拉箭头出现在我们预想的位置就是用把原下拉箭头覆盖/styled-select select { background: transparent; width: 268px; padding: 5px; font-size: 16px; border: 1px solid #ccc; height: 34px; -webkit-appearance: none; /for chrome/}在select外面套一个div ,给这个div设置固定
宽度,并且设置overflow:hidden; 然后再给select设置宽度(select的款度要大于外面div的宽度)
selectbox { width:120px; overflow:hidden; border-right:1px #000 solid;}
select { width:140px;}
<div class="selectbox">
<select><option>ftwgw</option></select>
</div>jquery的hide方法只是在相应DOM上面增加了样式:display: none
而option不是可绘制的DOM,所以使用hide方法是无效的
两种解决方案:
1在option标签上面加上disabled="disabled"属性,表示不可用,这种方案只是让option不能选择,但没有隐藏掉
2如果想隐藏掉,只能把option从DOM树中去除,然后对去除的option进行缓存,在要显示的时候再将option从缓存中取出加入DOM树中
希望对您有帮助~
By Billskate
评论列表(0条)