我发现甚至国外很多只是select的样子改了而没有重新写了下拉菜单的样式?实现起来不难啊。
不太明白楼主的意思。。。
什么叫“只是select的样子改了”“没有重新写了下拉菜单的样式”
select 不就是 下拉菜单吗?
那我就回答标题所说的:“自定义实现select标签为什么很少人使用?”
这种问题恐怕只是主观感受吧,也没有什么数据可以证明,
另外我个人是一直有在用 selectize.js
http://brianreavis.github.io/selectize.js/
具体要看需求啊,原生 select 可以用的话,就不需要这种东西来代替了。
不用他的原因是我觉得有以下几点:
1.兼容性不太好,不同的浏览器、长的不一样。
2.默认的样式长的丑,可定制性差。
1,有很多这样的插件
http://ivaynberg.github.io/select2/select2-latest.html
http://silviomoreto.github.io/bootstrap-select/
http://davidstutz.github.io/bootstrap-multiselect/
http://aui.github.io/popupjs/doc/selectbox.html
2,实现起来不难啊?
不难为什么你不自己尝试写?
事实上我也尝试写过几个版本,但实际项目中使用才发现,这东西不是想的那么简单的,比如很简单一个场景:
$("select").append("<option>item x</option>");
这时候如实来同步显示?当这个 select 在页面底部的时候 Options 列表如何显示?
想做好也不那么简单吧。。。
原生的select标签在不同浏览器下显示不同的样式,特别是在IE下,样子丑陋无比。重写select样式不难,但真正的连原生的select多个事件和根据业务的需求写好一个模拟select插件并不容易,其实国外已经有很多重写的插件了,前段时间因为项目的需要,重写了一个替换原生select的插件。
https://github.com/shenmiweiyi/selectlist
楼主说的应该是类似于jQuery Mobile
中select
组件的效果,对select
做了自定义,但是点击之后展开的option
的样式并没有变,还是默认的样式。
他是在select
这个组件的外层包了一层,对包的这层定义样式,然后将select
的默认样式去掉-webkit-appearance: none
,再将其透明度设置为0,然后绝对定位在哪里。
是否需要自定义看具体需求,我觉的jQuery Mobile
这样做就很合适,手机上的展示效果比PC上的下拉要好很多。
jQuery Mobile Select
剛剛寫了一個:
http://bumfo.github.io/select.html
爲了修改下拉菜單的樣式,我用腳本自己實現了一個,支持鍵盤操作,兼容 iOS/Android。
支持 Webkit/Blink/Gecko,外觀基本相同。
IE 舊版如果不支持會自動顯示爲默認的 select。
如果不用腳本恐怕,很難實現完整功能吧。
所以純 CSS 實現的 select 一般都不會自定義下拉菜單樣式。
實現起來不難吧,但和加一段 CSS 比起來呢?