CSS background property applied to HTML Input element within Table cell

134 views Asked by At

JSFiddle

When you hover over an input field in the table, the entire cell turns grey except for a few pixels at the top. Why is that? I've tried setting everything I can think of (margin, padding, box-shadow, etc) to 0 or none, but to no avail.

2

There are 2 answers

0
Xavier On BEST ANSWER

You've not defined a height on the Input field, therefore it's smaller than the containing td

td input {
     height:20px;
}

http://jsfiddle.net/oe2ofup6/2/

0
tavnab On

Consider changing your CSS to check for td:hover instead of input:hover.

Instead of:

td input:hover {
    background-color: #8d8d8d;
}

td input {
    width: 100%;
    border: 0;
}

try:

td input {
    width: 100%;
    border: 0;
}

td:hover, td:hover input {
    background-color: #8d8d8d;
}

JSFiddle