CODEWITHSUNDEEP
htmlcssbackgroundhtml-tablehtml-input
ericgrosse
ericgrosse

Reputation: 1510

CSS background property applied to HTML Input element within Table cell

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.

Upvotes: 1

Views: 133

Answers (2)

tavnab
tavnab

Reputation: 2734

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

Upvotes: 1

Xavier
Xavier

Reputation: 871

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/

Upvotes: 1

Related Questions