使用 Ryan Fait 的 jQuery 样式脚本的多种尺寸的 <select> 元素答案

【问题标题】：Multiple sizes of <select> element using Ryan Fait's jQuery styling script使用 Ryan Fait 的 jQuery 样式脚本的多种尺寸的 <select> 元素
【发布时间】：2012-05-14 21:03:04
【问题描述】：

我完全是 java 新手，几乎可以自己做 nil。我想知道如何修改 Ryan Fait 的输入样式 jQuery 以允许 2 种不同类型的元素。这是他非常有用的代码的链接：

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

基本上它工作得非常顺利，但我不知道如何制作 2 种不同尺寸（一个大，一个小，因此也有不同的背景图像）的菜单。提前致谢！

【问题讨论】：

弄乱操作系统控件通常不是一个好主意，因为有些用户可能已经习惯了它们，或者依赖它们来查看他们设置的某种方式，但是这样做非常流行，尤其是提交按钮。
@tandu 有些用户可能已经习惯了？没有样式元素的理由不好，您是否习惯于stackoverflow设计并且只想查看所有具有相似外观的网站！？
@user1394674 至少提供一个标记！你试过什么？

标签： jquery css select input

【解决方案1】：

您遇到的问题是元素的大小在源代码中是硬编码的，这是代码编写方式的不幸副作用。虽然您可以对源代码进行大量更改以使其接受多种样式，但最好只使用 CSS 和一些额外的 HTML。

如果您的 HTML 看起来像这样：

<label for="first">Specially styled select box</label>
<div class="styled-select">
    <select name="first">
        <option>Here is the first option</option>
        <option>The second option</option>
    </select>
</div>

<label for="first">Specially styled select box, with massive text</label>
<div class="styled-select">
    <select name="second" class="massive">
        <option>Here is the first option</option>
        <option>The second option</option>
    </select>
</div>

您的样式表可能如下所示：

.styled-select {
    width: 240px;
    height: 34px;
    overflow: hidden;
    background: url(http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg) no-repeat right #DDD;
}
.styled-select select {
    background: transparent;
    width: 268px;
    padding: 5px;
    border: 1px solid #CCC;
    font-size: 16px;
    height: 34px;
    -webkit-appearance: none;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

select.massive {
    font-size: 24px;
    padding-top: 1px;
    padding-right: 55px;
    padding-bottom: 0;
}

通过this jsfiddle查看它的实际效果。

（来源：bavotsan.com）

【讨论】：