【问题标题】:How do you customise HTML select option menus? [duplicate]如何自定义 HTML 选择选项菜单? [复制]
【发布时间】:2011-11-20 19:39:11
【问题描述】:

可能重复:
How to make a custom select option menu style without image in CSS?

是否可以自定义 HTML 选择选项菜单及其附加按钮的外观?如果可以,您如何做到这一点?

例如,我有一个看起来像这样的菜单

<select id="music" title="Music Genres">
<option>Ambient</option>
<option>Acoustic</option>
<option>Alternative</option>
<option>Beat</option>
<option>Break</option>
<option>Bass</option>
</select>

但我需要让它看起来像我网站的其他部分,而不是它的默认设计


我在 Youtube 上找到了这个视频教程,它告诉你如何完成(有点)http://www.youtube.com/watch?v=jzvRue8pS-U

【问题讨论】:

    标签: html css


    【解决方案1】:

    很难正确设置&lt;select&gt; 标签的样式,因为不同的浏览器/操作系统会以不同的方式呈现它们。

    您可以使用 JavaScript 构建一个选择框类型的控件,如果您使用的是 jQuery,那么有很多插件可以做到这一点,例如 this one。谷歌搜索 jquery select box 应该可以帮助您入门。

    当然,不用 jQuery 也可以,但更难。归根结底:样式化&lt;select&gt; 标签非常不可靠。虽然支持非常基本的属性,但大多数 CSS 属性不支持。

    【讨论】:

      【解决方案2】:

      这真的取决于你想做什么。您可以像任何其他网站元素一样修改它及其成员,但存在一些基于浏览器和操作系统的限制(例如,它始终是某种列表)。

      因此您可以执行以下任何操作:

      <select id="music" title="Music Genres" style="background-color: #c0c0c0; color: #000000">
      <option style="font-weight: bold">Ambient</option>
      <option class="some-css-class">Acoustic</option>
      </select>
      

      【讨论】:

        【解决方案3】:

        如上,不同的浏览器对表单元素的样式支持不同;它们的视觉风格由操作系统决定。

        理论上,从惯例的角度来看,您不应该设置表单元素的样式,因为它是浏览器 UI 的一部分。

        【讨论】:

          【解决方案4】:

          取自上一个类似问题的评论:

          CSS / HTML - Styling select boxes properly

          select 元素只接受非常有限的 CSS,因为它们是被渲染的 由操作系统,而不是浏览器本身。您可以使用 select 模拟 样式为ul(或ol)和一些JavaScript;但造型select 元素本身几乎不可能可靠地实现。读这个 关于 JavaScript 方法的一些指针的问题(尽管有 jQuery 而不是普通的 JS):Html Select box options on Hover?

          话虽如此,您可以在一定程度上使用简单的 CSS,但每个浏览器都会在其输出(背景、边框、字体属性等 - 与大多数 CSS 属性/值相同)时稍微不同地呈现它们。正如其他人所说,您可以使用 jQuery/Javascript 来处理它们,但人们对这是否是好的做法有不同的看法。上面链接的问题有一个例子。

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 2012-01-24
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2015-11-17
            相关资源
            最近更新 更多