如何防止 tr 的背景颜色溢出到禁用的输入字段中答案

【问题标题】：How to prevent overflow of background color of tr into disabled input field如何防止 tr 的背景颜色溢出到禁用的输入字段中
【发布时间】：2016-03-02 02:14:26
【问题描述】：

我的表格中的行的背景颜色在白色和黄色之间交替。单元格包含在某些情况下可以禁用的输入字段。我使用以下样式来禁用该字段。

input.disabled {
   cursor: default;
   opacity: 0.4;
   filter: alpha(opacity=40);
   pointer-events: none;
}

我观察到如果该字段被禁用，该行的背景颜色也会变成输入字段的背景颜色。如果该字段未禁用，则背景颜色不会填满输入字段。如何防止 tr 的背景颜色在禁用时被输入字段继承。简而言之，我希望它看起来与启用该字段时相同，只是有点变灰。

下面是涵盖这些场景的 HTML 表格。

<table>
 <tr>
   <td>Text Disabled</td>
   <td><input type="checkbox"/></td>
   <td><input type="text" class="disabled"/></td>
 </tr>
 <tr>
   <td>Text Disabled</td>
   <td><input type="checkbox"/></td>
  <td><input type="text" class="disabled"/></td>
 </tr>
 <tr>
   <td>Checkbox Disabled</td>
   <td><input type="checkbox" class="disabled"/></td>
   <td><input type="text" /></td>
 </tr>
 <tr>
   <td>Checkbox Disabled</td>
   <td><input type="checkbox" class="disabled"/></td>
   <td><input type="text" /></td>
 </tr>
 <tr>
   <td>Both Enabled</td>
   <td><input type="checkbox"/></td>
   <td><input type="text" /></td>
 </tr>
 <tr>
   <td>Both Enabled</td>
   <td><input type="checkbox"/></td>
   <td><input type="text" /></td>
 </tr>

CSS 在行背景颜色之间交替：

/* Odd Row */
tr:nth-child(2n+1) {
  background: #efef00;
}
/* Even Row */
tr:nth-child(2n) {
  background: #ffffff;
}

这里是 jsfiddle 来测试这个：https://jsfiddle.net/p5hcjyxx/8/

【问题讨论】：

更改背景颜色而不是不透明度。
是this你想要什么？
不使用指针事件和不透明度，为什么不直接将 disabled 属性添加到输入中？
部分实现的结果。现在该字段未变灰（尽管已禁用）。它应该看起来是灰色的。

标签： javascript html css

【解决方案1】：

Updated fiddle.

发生这种情况是因为 css opacity 属性。

opacity CSS 属性指定元素的透明度，即元素背后的背景被覆盖的程度。

您可以使用 background-color 代替：

input.disabled {
  cursor: default;
  background-color: #EEEEEE;
  pointer-events: none;
}

希望这会有所帮助。

【讨论】：