Как предотвратить переполнение цвета фона tr в отключенное поле ввода

Question

У меня есть таблица со строками, в которых цвета фона чередуются между белым и желтым. Ячейки содержат поля ввода, которые в определенных обстоятельствах могут быть отключены. Я использую следующий стиль для отключения поля.

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/

Answer 1

Updated fiddle.

Это происходит из-за css opacity Недвижимость.

Свойство opacity CSS определяет прозрачность элемента, то есть степень, на которой перекрывается фон, лежащий за элементом.

Вы можете использовать background-color, например, вместо того, чтобы:

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

Надеется, что это помогает.