Table td input field border issue in firefox

Question

Demo

Click on any cell in the table in the JSFiddle in firefox and you'll see that the bottom and right borders are hidden. Is there an elegant way to get around this?

I have tried a couple of things but they didn't work out for me:

• Add padding-right: 3px in order to view the right side of the blue border and border-right: 3px to compensate for the padding that was just added in. This causes precedence issues between border and background-color.
• On td input:focus, reduce the width and height of the input field by a couple pixels. Unfortunately, I need the width to be set to 100% since I have resizable columns (excluded from the JSFiddle for brevity).

Answer 1

In my experience box-shadow is far more reliable, and on top of it more flexible to use than outline ;)

input:focus {
    box-shadow: 0 0 0 2px blue inset;
}