Question

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

<xsl:for-each select="phoneContact"> 
    <xsl:element name="phoneContact{position()}">
     ...
   </xsl:element>
</xsl:for-each>

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

以下是涵盖方案的HTML表格。

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

CSS在行背景颜色之间切换：

<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>

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

Answer 1

<强> Updated fiddle

这是因为css opacity 属性。

不透明度CSS属性指定元素的透明度，即元素背后的背景重叠的程度。

您可以使用background-color代替：

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

希望这有帮助。

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

1 个答案: