Question

I am having an issue where padding top is being ignored in Safari in an input text box. This issue doesn’t occur in Chrome, Firefox nor IE. I created a JS Fiddle to display the issue:

http://jsfiddle.net/Xrpwn/5/

If you view this fiddle in Chrome, you can see that the padding-top is rendered correctly. However, if you view this fiddle in Safari, the padding-top is ignored and the cursor is by default placed in the vertical center of the input.

For some reason, by default Safari seems to vertically center text in an input. When looking at the source for RenderTextControlSingleLine at http://opensource.apple.com/source/WebCore/WebCore-514/rendering/RenderTextControlSingleLine.cpp it has:

// For text fields, center the inner text vertically
// Don't do this for search fields, since we don't honor height for them
if (!m_innerBlock) {
currentHeight = innerTextRenderer->height();
if (currentHeight < height())
innerTextRenderer->setLocation(innerTextRenderer->x(), (height() - currentHeight) / 2);
}

I would like to know if anyone knows how to override this behavior using CSS or jQuery or something like that.

Answer 1

I don’t believe you’ll be able to override that behavior, but you could simulate the same effect using something like this http://jsfiddle.net/Xrpwn/7/ (pardon the slop) with a javascript event that captures input:focus/blur to add/remove the outline to the container div.