How can I make table row background color override cell input elements background color?

Question

When a user clicks the table row, I apply the following class to the row

tr.selected {
background-color:#FFA76C;
}

However there are inputs in cells with background colors that is overriding the background color of the row. (For example in the picture attached, the first and third row are selected. The first row, cells one and three inputs are overriding the row background with yellow.)

I want the background color of the row to be the predominant color when selected, overriding the color of the table cell inputs inside the row.

function selectRow(row) {
    if (row.className.indexOf("selected") != -1) {
        row.className = row.className.replace("selected", "");
    } else {
        row.className += " selected";
    }
}

tr.selected{
    background-color:#FFA76C;
}

<table>
<tbody>
  <tr class="selected"  style="height: 20px;">
  <th align="left" style="font-size:11px;border:1px solid grey;padding-bottom: 3px;white-space: nowrap;" onclick="selectRow(this.parentNode);"><div style="width:15px"></div>
  </th>
  <td align="left" style="font-size:11px;border:1px solid grey;height: 20px;overflow: hidden; white-space: nowrap;">
  <input type="text" style="border: none; width: 150px; height: 100%; text-align: center; overflow: hidden; background: rgb(255, 255, 0);">
  </td>
  
  <td align="left" style="font-size:11px;border:1px solid grey;height: 100%;overflow: hidden;align: left; white-space: nowrap;"><input type="text" style="border: none;width: 150px;height: 100%;text-align: center;overflow: hidden;background: transparent;"></td>
  
  <td align="left" style="font-size:11px;border:1px solid grey;width: 99%;overflow: hidden;"><input type="text"  style="border: none; width: 100%; height: 100%; text-align: center; overflow: hidden; background: rgb(255, 255, 0);"></td>
  </tr>
</tbody>
</table>

Answer 1

apply this one

tr.selected td {
    background-color:#FFA76C !important;
}

to avoid from !important, define this property after the cell property which is overriding this property.

Answer 2

try to use something like

tr.selected td, tr.selected th {
    background-color: transparent;
}

so, the bg color of the th or td inside the table row will not overwrite the tr color.
Also you should use the !important to overwrite the inline-styles (or avoid using inline-styles, which is better).