Question

我似乎无法定义<select>的高度，甚至将其设置为display:block

select{
    height: 100px; /* ignored */
    display: inline-block;
}

http://jsfiddle.net/3Vz9Y/

知道为什么吗？

-edit -

我正在使用谷歌浏览器

Answer 1

我找到了相关帖子here

您也可以通过这种方式设置select的样式：

Fiddle

.styled{
    position: relative;
    background: transparent;
    background-color: #FCFCFC;
    -webkit-appearance: none;    
    height: 25px;
    min-width: 50px;   

}

Answer 2

如果您正在使用Mac，请务必添加

 -webkit-appearance: none;

在样式属性之上，例如：

select {
-webkit-appearance: none;
height: 100px;
display: inline-block;

}

然后你可以为自己的心灵内容增添风格。

http://jsfiddle.net/3Vz9Y/17/

Answer 3

试试此代码..

现在这段代码适用于所有浏览器......

Fiddle

CSS

 select
    {
    min-height:20px;
    display: block;
    }

HTML

<select>
     <option>hi</option>    
</select>

如何设置<select>的高度</select>

3 个答案: