CODEWITHSUNDEEP
htmlcss
erotavlas
erotavlas

Reputation: 4483

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

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

enter image description here

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>

Upvotes: 3

Views: 9805

Answers (2)

Petryk P&#39;yatochkin
Petryk P&#39;yatochkin

Reputation: 332

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

Upvotes: 4

Ahmad Asjad
Ahmad Asjad

Reputation: 823

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.

Upvotes: 5

Related Questions