Stylish SELECT

我一直在想如何去给SELECT做一下美化, 如果用CSS去定义这个标签, 定义出来的效果有很多很多问题, 比如不能运用图片或其他浏览器支持得不好什么的.

在我看过很多很多运用在Web上的效果都是通过JavaScript去实现的, JavaScript对我来说算是完全不懂, 我只是接触过一些关于DOM的东东, 于是我开始学习JavaScript, 花了整整一个星期去熟悉这个陌生的东西.

在这期间得到了很多人的帮助, 某人告诉我直接用现成的JavaScript框架去做, 但是我对JavaScript框架根本就不了解, 我只好放弃JavaScript框架. 在这里我特别想感谢一个人, 那就是沙滩凉鞋, 无论在PHP, JavaScript上他都给我很大的帮助.

虽然花了不少时间去测试代码, 但是效果终于写出来了.

效果图:
Select to CSS

结构分析图:

select2fx.jpg

Demo: Click Here!!!

Related Posts

30 Responses to “Stylish SELECT”

  1. Hector Vega Says:

    Hola! desde hace un tiempo he estado entrando a tu blog, y he visto los BUENOS templates para wordpress QUE HACES. me da mucho gusto que alguien haga estos THEMPLATES gratuitos.

    Nesesito que me ayudes, NO TENDRAS ESTE TEMA EN ESPAÑOL u el 5u EN ESPAÑOL porfabor. de verdad que te lo AGRADECERIA MUCHISIMO.

    Saludos desde Chetumal, Quintana Roo, Mexico.

  2. tension Says:

    Sofa 好东西,终于实现了,完美啊!

    又上一层楼了,!

  3. Leeiio Says:

    剛在麥6網看到了…..

  4. Hoofei Says:

    真不错..下了留着用!

  5. Hector Vega Says:

    Utom, no tendras por alla este tema (el que estas usando en este momento) en .zip o .rar. o .tar.gz porfa en español.

    Saludos ñ_ñ

  6. Utom Says:

    @Hector Vega
    Can you speak English?
    I don’t understand what did you say.

  7. fen Says:

    很好,很弓虽大!收藏。

  8. bo Says:

    有点小小的不足。当我点出下拉菜单,而这时我点击菜单外的空白区想取消这次操作,如果在普通操作系统中的下拉菜单应该会消失并且选择不做改变。但utom的下拉菜单不会消失,必须点击选项。一个小地方,希望utom继续改进。utom是学美术的吧,做的东西赏心悦目。

  9. Utom Says:

    我不是学美术! :) 我还在解决!

  10. jiangxiaolei Says:

    ^_^,终于放出来了

    虽然utom非美术,的确比我设计的更棒,心里极度不平衡。

  11. Hector Vega Says:

    But not all will be instantly by the subject (which are running at the moment). Zip or Rar. Or Tar.gz porfa in Spanish.

    Greetings ñ_ñ

  12. underone Says:

    靠。。。。帅。。。

  13. Yleo77 Says:

    这个模板太漂亮了。 very!

  14. chang Says:

    哇喀咯,真的很棒。

  15. zack Says:

    很好很强大

  16. 徐林 Says:

    不是一般的牛

  17. flytwokites Says:

    果然不是一般的帅啊。

  18. iHao Says:

    好东东应该顶到digg上去。

  19. WSQ Says:

    哇~
    太利害了~~

  20. bear Says:

    Good job! but clear
    one bug’s text input background problem on ie6.

  21. LooseLive Says:

    function $(id) {
    return document.getElementById(id);
    }
    这句与jQuery冲突该如何解决啊!

  22. Penn Says:

    好像还不支持optgroup,如果能在下一版本加上就更完美了!

  23. pojay Says:

    onChange怎么无效了? 有解决的办法么

  24. superb Says:

    你好,我用了你的stylish select, 在各个浏览器上都很work,但是我碰到一个问题:
    如果在 div.select_box 上使用了定位(我用的是absolute),那个下拉框的遮挡在IE会出现在问题。在我的页面中的问题是,两个上下排列的stylish select, 上面那个的下拉框无法盖下下面的select box。
    我查了一下资料,可能是IE在处理stack context上的bug导致这个问题。IE会为使用了定位的元素创建新的stack context, 然后设置z-index为0。但是我按照一些解决办法,把父元素的z-index设为99,仍然不能解决问题。(其实我也并不是很理解这个bug … )

    希望大牛能看一下这个问题,继续完善这个东东哈~

  25. Roki_L Says:

    你好,我想下这个可是现在已经无法下载了。
    请问能否发到邮箱呢?谢谢了。

  26. Roki_L Says:

    PS:我邮箱:roki1223@vip.qq.com
    或者axiu_lou@yahoo.com.cn
    谢谢……

  27. utom Says:

    http://utom.us/works/cssforms/

  28. yukiiak Says:

    用起来不知道卡不卡~~

  29. yukiiak Says:

    貌似不支持两个或多个,还有建议不使用 $() ,偶尔会有冲突。 :)

  30. 扬眉 Says:

    你好,我想请教下,如果那个下拉列表框向上的,又是如何,现在你都是向下展开的。

1 Trackbacks/Pingbacks

  • » select下拉菜单美化 (Pingback, November 16, 2008)
    [...] DEMO:http://www.myhen.cn/demo/select2css/index.html DOWNLOAD:http://www.myhen.cn/demo/select2css.rar 出处:http://utombox.com/stylish-select/ [...]

Leave a Reply