无法应用多选 - 尺寸属性答案

【问题标题】：Multiple select - size attribute cannot be applied无法应用多选 - 尺寸属性
【发布时间】：2011-08-26 04:15:31
【问题描述】：

我有<select multiple="multiple">..</select> 选择，我也有一些我无法编辑的样式表中的select{heigth: 30px;}。现在我的多项选择有 1 行高度 - 无法应用“大小”属性。我该如何解决这个问题？

【问题讨论】：

标签： css select

【解决方案1】：

我喜欢干净的解决方案。

select[multiple] {
    height: 100px;

}

【讨论】：

【解决方案2】：

首先，我假设您使用的是height 属性，而不是拼写错误的heigth 属性。有两种方法可以解决这个问题。第一个（我不推荐）是简单地将样式附加到 HTML 元素，如下所示：

<select multiple="multiple" style="height:100px">..</select>

或者，相反，我的建议是制作第二个样式表，它使用以下属性，包括属性值后面的“！important”：

select {
    height: 100px !important;
}

这样做会覆盖原始样式，并替换它。这不是您可以用来覆盖它的唯一方法 - 您可以read here on CSS specificity。

【讨论】：

我想强调避免使用 !important 的重要性（没有双关语的意思）。当您养成在样式声明中添加 !important 的习惯时，您最终会得到一个非常难以追踪的样式规则意大利面。仅当您需要覆盖声明为内联的样式（在 HTML 元素本身上）并且您无法更改/删除该内联样式时才使用 !important。此外，不要对诸如“height: 100px”之类的特定声明使用诸如“select”之类的通用选择器，因为此类规则将针对您整个网站中的 all 选择框。请听从 morgar 的建议。
接下来是第二个建议：除非没有其他简单的方法，否则不要在 HTML 中使用内联样式声明，因为它会迫使人们稍后使用 !important 如果他们想要覆盖它。

【解决方案3】：

我认为正确的方法应该是向特定的<select> 添加一个类并赋予它正确的大小，例如：

<select multiple="multiple" class="multiple">

select.multiple {
    height: 100px;
}

【讨论】：