html - 从选择中清除 css 样式以禁用

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 样式，以便我的选择在禁用后看起来像 this ？除了不需要的副作用之外，我不一定要放弃当前的样式。

谢谢!

Answer 1

so, I have a page which uses a css stylesheet which unfortunately, I can't modify

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

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

恢复 <select> 是不可能的回到原生版本。

---

The problem is that the select due to the CSS inherited does not look disabled at all (even if it is infact disabled).

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

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