Change background color of input box when you hover over a row in a table?

Question

EDIT: changing the background of the input to transparent fixed the problem.

I have a table and need to change the background color of the input box in the row to the same color as the row. When I hover over the row, it changes to a light blue but the input box stays white, unless you hover over the input box. The color changes if you hover over the input box but I need it to change as well if u hover over any part of the row. Any help is appreciated.

.rowTable is the class for all the rows

HTML:

<td class="completedCalendar tableData"><input value="%dateCompleted%" class="datepicker picker_input" data-id="%todoID%" id="todo_completeddate" style="border:none" readonly="readonly"/></td>

CSS:

#main_todos_container .rowTable {
    border: solid;
    border-color: #f5f5f5;
    border-width: thin;
    font-size: 13px;
    border-left: 0;
    border-right: 0;
}

#main_todos_container .rowTable:hover .tableData {
    background-color: #f0f8fe;
}

 #main_todos_container .rowTable:hover > .completedCalendar {
    background-color: #f0f8fe;
}

Are you trying to do this with only CSS? Or are you using javascript or JQuery? — Ryan Wilson, Feb 06 '18 at 21:18
@RyanWilson Im using javascript and jquery but if its possible using only CSS i'd like to only use CSS — Patrick S, Feb 06 '18 at 21:19
Your input has class of datepicker.picker_input, try replacing your last css line with #main_todos_container .rowTable:hover > .datepicker.picker_input { background-color: #f0f8fe; } — Ryan Wilson, Feb 06 '18 at 21:20
Perhaps this question will help :https://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling — blackandorangecat, Feb 06 '18 at 21:20
Could you not just set the input's background to transparent? — Tom, Feb 06 '18 at 21:21
@PatrickS Great! This solution is my favorite since it doesn't rely on repeating colors and also works for images, gradients, etc. — Tom, Feb 06 '18 at 21:38

score 1 · Answer 1 · answered Feb 06 '18 at 21:26

Something like this? I could add code that fits your example exactly, but this is the general idea. The red is the td and the yellow is the input.

td {
  background: red;
  width: 100px;
}

td:hover>input, td:hover {
  background: green;
}

input {
  width: 50px;
  background: yellow;
}

<table>
  <tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
  </tr>
</table>

score 1 · Accepted Answer · answered Feb 06 '18 at 21:36

As mentioned in the comments, just use a transparent background.

CSS

td {
    background: red;
}

td:hover {
    background: green;
}

input {
    background: transparent;
}

HTML

<table>
  <tr>
    <td><input type="text" /></td>
    <td><input type="text" /></td>
  </tr>
</table>

Change background color of input box when you hover over a row in a table?

2 Answers2