CSS: style text of input field

Question

Kinda solved...

It is not possible with css. If you want to check out the project (currently only working in portrait) here is the link

I am currently rebuilding the Google calculator as a pwa.

I noticed in the app that if I put in more than 3 numbers there will be a space for every 1000x step.

123456789 => 123 456 789

Is there a way to do that with pure css? Like every :nth(3) from the right padding-right:.5rem.

If not possible I will use js.

I had the same question before and googled, seems not possible if only using css — Grace, Jun 01 '18 at 10:29
you could make your input transparent and use js to create a separate element for every digit for displaying your number, and then you can use `nth(3)` to add margins to your digits — Banana, Jun 01 '18 at 10:47
Yes,that was about what I thought I'd do. But I found this plugin, that works with css selectors :) — Domenik Reitzner, Jun 01 '18 at 10:49

score 0 · Answer 1 · answered Jun 01 '18 at 10:33

0

You can't achieve this using css only as you will need to read the input and modify it.

You'll need javascript to achieve this, for example : Adding space between numbers?

answered Jun 01 '18 at 10:33

Martin

Thank you. I know, with js, this would be no problem. – Domenik Reitzner Jun 01 '18 at 10:38

score 0 · Answer 2 · answered Jun 01 '18 at 10:39

0

Martin is right, you need to use a Javascript plugin like https://nosir.github.io/cleave.js/

answered Jun 01 '18 at 10:39

Webvoid

2 Answers2