title: How to prevent overflow of background color of tr into disabled input field
body: <p>I have table with rows that have background colors alternating between white and yellow. The cells contains input fields which in certain circumstances can be disabled. I use following styling to disable the field.</p>
  
  <pre><code>input.disabled {
     cursor: default;
     opacity: 0.4;
     filter: alpha(opacity=40);
     pointer-events: none;
  }
  </code></pre>
  
  <p>I observe that the background color of the row also becomes background color of the input field if the field is disabled. If the field is not disabled the background color doesn't fill up the input field. How to prevent background color of tr to be inherited by input field when it is disabled. In a nutshell I want it to look same as when the field is enabled except a little grayed out.</p>
  
  <p>Below is the HTML table that covers the scenarios. </p>
  
  <pre><code>&lt;table&gt;
   &lt;tr&gt;
     &lt;td&gt;Text Disabled&lt;/td&gt;
     &lt;td&gt;&lt;input type="checkbox"/&gt;&lt;/td&gt;
     &lt;td&gt;&lt;input type="text" class="disabled"/&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
     &lt;td&gt;Text Disabled&lt;/td&gt;
     &lt;td&gt;&lt;input type="checkbox"/&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="text" class="disabled"/&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
     &lt;td&gt;Checkbox Disabled&lt;/td&gt;
     &lt;td&gt;&lt;input type="checkbox" class="disabled"/&gt;&lt;/td&gt;
     &lt;td&gt;&lt;input type="text" /&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
     &lt;td&gt;Checkbox Disabled&lt;/td&gt;
     &lt;td&gt;&lt;input type="checkbox" class="disabled"/&gt;&lt;/td&gt;
     &lt;td&gt;&lt;input type="text" /&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
     &lt;td&gt;Both Enabled&lt;/td&gt;
     &lt;td&gt;&lt;input type="checkbox"/&gt;&lt;/td&gt;
     &lt;td&gt;&lt;input type="text" /&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
     &lt;td&gt;Both Enabled&lt;/td&gt;
     &lt;td&gt;&lt;input type="checkbox"/&gt;&lt;/td&gt;
     &lt;td&gt;&lt;input type="text" /&gt;&lt;/td&gt;
   &lt;/tr&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS to alternate between row background colors:</p>
  
  <pre><code>/* Odd Row */
  tr:nth-child(2n+1) {
    background: #efef00;
  }
  /* Even Row */
  tr:nth-child(2n) {
    background: #ffffff;
  }
  </code></pre>
  
  <p>Here's jsfiddle to test this: <a href="https://jsfiddle.net/p5hcjyxx/8/" rel="nofollow">https://jsfiddle.net/p5hcjyxx/8/</a></p>