如何设置下拉列表项的样式

How to style Drop Down list items

本文关键字:下拉列表 样式 设置 何设置      更新时间:2023-09-26

你们能告诉我如何设计下拉列表项目的样式吗?我想在列表项目之间留出更多的间距,也许在每个项目下都有一个边框?

<select class="text_select" id="field_14" name="field_14" style="opacity: 0;">
    <option value="- Select -">- Select -</option>
    <option value="0 - $2m">0 - $2m</option>
    <option value="$2.1 &ndash; $5m">$2.1 &ndash; $5m</option>
    <option value="$5.1 - $10m">$5.1 - $10m</option>
    <option value="$10 -$20m">$10 -$20m</option>
    <option value="Greater than $20M">Greater than $20M</option>
</select>

您可以使用JQUERY COMOBOX

它是标准组合框的一个不引人注目的替代品,允许开发人员/设计师对控件和选项列表进行样式化。

易于设置,默认样式不需要CSS类、动画下拉列表,并且它仍然可以与Forms一起使用,而不需要更改代码。

检查下面的jquery插件,它们可能会帮助您

jqtransform

漂亮的

均匀

查看更多

yui格式的

您可以将其用于样式化的下拉演示

/*第一个答案*/

<style>
 li {
    /* CODE HERE */
 }     
</style>

/*编辑*/

好链接=>如何设计<选择>只使用CSS而不使用JavaScript的下拉列表?

.list-item {
    margin-top:10px;
    margin-bottom:10px;
    border-bottom:1px;
}