首页 > 自定义实现select标签为什么很少人使用?

自定义实现select标签为什么很少人使用?

我发现甚至国外很多只是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 Mobileselect组件的效果,对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 比起來呢?

【热门文章】
【热门文章】