使用 CSS 的平面下拉列表答案

【问题标题】：Flat DropDownList using CSS使用 CSS 的平面下拉列表
【发布时间】：2013-06-16 19:32:17
【问题描述】：

我正在使用下面的 css 代码在我的 aspx 页面中对 TextBox 和 DropDownList 进行平面化和样式化。样式正确应用于 TextBox 。但是 DropDownList 看起来并不平坦。看图。

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

我该如何解决这个问题？

【问题讨论】：

您的代码似乎可以工作 > 检查THIS

标签： asp.net css stylesheet html-select

【解决方案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>

【讨论】：

【解决方案2】：

不确定这是否可行，但我没有足够的代表发表评论，尝试一下也无妨。使用“！important”规则覆盖可能应用于下拉列表的任何其他样式。

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

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

【讨论】：