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

How to prevent overflow of background color of tr into disabled input field

本文关键字：输入 字段 溢出 何防止 tr 背景 颜色      更新时间：2023-09-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/

更新了小提琴。

发生这种情况是因为 css 不透明度属性。

opacity CSS 属性指定元素的透明度，即元素后面的背景的叠加程度。

例如，您可以使用background-color代替：

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

希望这有帮助。

相关文章：