Chrome and Firefox add extra padding to input. Why?

Question

css

The task is to mimic the input[type=text] div. All styles are spelled the same. The final style inspector doesn't show a single difference.
jsfiddle.net/yWqYz/1/ - here you can see these elements. If you look closely, you can see that the input has a horizontal padding of 1px.
It becomes especially ugly when these elements dynamically replace each other - jsfiddle.net/yWqYz/2/ - the text jumps back and forth.
Question 1: why.
Question 2: how to get around this. The option to add padding to the div is not an option - it will go to Opera and IE.

Answer 1

I struggled with your task for a long time, but did not come up with anything. Apparently, this additional pixel is intended to ensure that the blinking cursor fits between the first letter and the edge of the field.
You can solve this problem by writing separate styles for the wrong browsers. For example, this is ugly, but it works (I checked it in chrome, ff and opera).

Answer 2

In FireFox, this area is reserved for selection. You can remove it like this:
button::-moz-focus-inner,
input[type=submit]::-moz-focus-inner,
input[type=reset]::-moz-focus-inner,
input[type=button] ::-moz-focus-inner {
padding: 0;
border: 0;
}

Answer 3

You can use the opposite instead of div input, something like this: add the readonly attribute and style cursor: default;

Answer 4

It is possible, but within the framework of the task, it will not work. The bottom line is that you need to display the text painted in different colors inside the textbox after the user removes focus from it. It is different so that the first word is blue, the second is red, and so on. Since input cannot have markup inside of it, the element is replaced with a div with the marked up text entered.

Answer 5

I see only one way out, connect different styles by user_agent, nothing else comes to mind, but this is a solution for sophisticated perfectionists.