Is there a way with CSS to add space between the cursor, and the placeholder text in an input?

Question

My question relates to a bug found on an earlier version of Firefox for OSX (37.0.2), which I have a screenshot of here: https://i.sstatic.net/dzK0G.png

Is there any way with css to move the placeholder's first character away from where the cursor initially sits?

The page is an Angular app, which sometimes doesn't play well with Firefox, I've heard.

I've tried adding text-indent, and padding-left to moz-placeholder, but that moves the cursor along with the placeholder text.

I've also built a bit of JS to prepend a space to placeholder text, within all versions of Firefox, but I'd love to avoid having to do this.

Answer 1

I would suggest to either generate all placeholders with a leading space, as previously stated, or simply use ::-moz-placeholder { font-style: italic; }.