Question

所以，我有一个使用css样式表的页面，遗憾的是，我无法修改，其中包含：

select {
    color: #333333;
    background-color: #FAFAFA;
    font-family: "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size: 1.1em;
    font-weight: normal;
    border: 1px solid #A9B8C2;
    padding: 1px;
}

在同一页面中，我有一个

<select id='myid' style='width:400px;'>

已禁用（我尝试在HTML中使用disabled或JS'element.disabled = true禁用相同的结果）。

问题是由于继承的CSS导致的选择根本看起来没有被禁用（即使它被禁用）。

如何最好地清除继承的CSS样式，以便我的select一旦被禁用就像this？除了不必要的副作用外，我不一定想放弃当前的风格。

谢谢！

Answer 1

所以，我有一个使用css样式表的页面，不幸的是，我无法修改

如果您无法修改设置此项的样式表：

select {
    background-color: #FAFAFA;
    border: 1px solid #A9B8C2;
}

不可能将<select>还原为原生版本。

问题是由于CSS继承而导致的选择不显示完全禁用（即使它被禁用）。

在这种情况下，我认为你应该这样做：

select[disabled] {
    border: 1px solid red;
    /* whatever you want a disabled select to look like */
}

Answer 2

您可以在HTML中的脚本块中重新定义一些CSS，以便在这些行中覆盖css样式：

<html>
 ...your existing file
<script type="text/css">
....my new styles to override the ones I can't change
</script>
</html>

虽然这并不理想，但它可能会解决这个特殊问题。

Answer 3

<SELECT>不接受像其他标记一样的CSS样式，因为它是由操作系统呈现的，而不是HTML。这就是它在MAC / PC等上看起来不同的原因。

Answer 4

尝试明确地设置颜色和背景颜色，如下所示：

    <select id='myid' style='width:400px; backgound-color: ####'>

希望这会有所帮助!!

从select for disable清除css样式

4 个答案: