CSS background property applied to HTML Input element within Table cell

Question

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.

td { line-height: 100% }. the size of the text in the input doesn't match the height of the table cell. setting line-height: 100% on the cell itself fixes that — Marc B
– Marc B, Commented Jun 8, 2015 at 20:47

Xavier · Accepted Answer · 2015-06-08 20:48:05Z

1

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/

answered Jun 8, 2015 at 20:48

Xavier

8714 gold badges9 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tavnab · Accepted Answer · 2015-06-08 20:55:02Z

1

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

edited Jun 8, 2015 at 20:55

answered Jun 8, 2015 at 20:49

tavnab

2,7541 gold badge21 silver badges27 bronze badges

Collectives™ on Stack Overflow

CSS background property applied to HTML Input element within Table cell

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related