使用CSS的Flat DropDownList

Question

我使用下面的css代码在我的aspx页面中展平和设置TextBox和DropDownList的样式。样式正确应用于TextBox。但DropDownList看起来并不平坦。看图像。

.txtDllBox
{
    border: 1px solid #ccc;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;         

}

我该如何解决这个问题？

Answer 1

您可以将select box放入div并将 css 添加到div，如下所示：

div { 
    border:2px solid #ced6e9; 
    -moz-border-radius:8px; 
    border-radius: 8px;
    display: inline-block;
}

select {
    margin: 2px;
    border: none;
}

your html can be like this:

<div>
    <select>
        <option value="0">Select one...</option>
        <option values="1">1</option>
    </select>
</div>

Answer 2

不确定这是否有效，但我没有足够的代表作为评论发布，尝试也没有什么坏处。使用“！important”规则覆盖可能应用于下拉列表的任何其他样式。

.txtDllBox
{
    border:                1px solid #ccc  !important;
    border-radius:         4px             !important;
    -moz-border-radius:    4px             !important;
    -webkit-border-radius: 4px             !important;         
}

请注意，如果在某些时候需要从父控件继承任何这些样式，这可能会使CSS更难维护。