我是 java 的新手,一个人几乎什么都做不了。我想知道如何修改 Ryan Fait 的输入样式 jQuery 以允许 2 种不同类型的元素。这是他非常有用的代码的链接:
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
基本上它工作得非常顺利,但我不知道如何做一个菜单的 2 种不同尺寸(一大一小,因此也有不同的背景图像)。提前致谢!
最佳答案
您遇到的问题是元素的大小在源代码中是硬编码的,这是代码编写方式的一个不幸的副作用。虽然您可以对源代码进行大量更改以使其接受多种样式,但最好只使用 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)
关于jquery - 使用 Ryan Fait 的 jQuery 样式脚本的多种尺寸的 <select> 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10591017/