remove the letter-spacing for last letter while entering 4 digit pin?

Asked May 14 '19 at 08:48

Active May 14 '19 at 09:47

Viewed 1,514 times

Run the snippet and type letters in input pin field.

I used the css property letter-spacing in input field. It's creating additional space after each character.

However, I don't want to add space after last character. How can I achieve that?

.spc {
  letter-spacing: 0.2em;
}

#ps:nth-letter(odd) {
  letter-spacing: 0em;
}

PIN: <input id="ps" class="spc" type="text" name="pin" maxlength="4" size="4">

sample url

edited May 14 '19 at 09:06

connexo

53,704
14
91
128

asked May 14 '19 at 08:48

Abinaya

if i understand you want pin: 8 8 88 ? – axel axel May 14 '19 at 08:49
3

No, I guess he wants "8 8 8 8" instead of "8 8 8 8 " – xavier May 14 '19 at 08:51
pin like '8 8 8 8'. but with above code i am getting '8 8 8 8 ' – Abinaya May 14 '19 at 08:52
1

There is no extra space in your example. The input field only allows to type 4 characters. It displays `8 8 8 8 ` with what _seems_ to be a space at the end, but it's not. It's only because the letter spacing is set to 0.2em, so characters are very wide. – Jeremy Thille May 14 '19 at 08:55
1

`:nth-letter` is not really a thing in current CSS as far as I’m aware. – 04FS May 14 '19 at 08:57
2

@JeremyThille That is exactly what OP is trying to solve. They want to apply additional `letter-spacing` to all letters *but the last*. – connexo May 14 '19 at 08:58
Like this? -- https://jsfiddle.net/u3hkdvgs/3/ – Christopher Bennett May 14 '19 at 09:00
2

@ChristopherBennett That just showcases the same problem on an external site, how is that supposed to help? – connexo May 14 '19 at 09:01
How is that the same problem? There is no longer space in the input box after 4 numbers are input. – Christopher Bennett May 14 '19 at 09:03
@ChristopherBennett Make the width bigger, and yes there is https://jsfiddle.net/rvb5ekda/ – Jack Bashford May 14 '19 at 09:04
@connexo if it is no space in last char cursor going last letter with some space – Abinaya May 14 '19 at 09:08
I don't think it's possible without JavaScript honestly. – Jack Bashford May 14 '19 at 09:20
@JackBashford okay fine.. how to achive it using javascript – Abinaya May 14 '19 at 09:21
looking at the duplicates, don't think this is possible – Pete May 14 '19 at 09:52
@Abinaya - I am stuck at same issue. Did you managed to resolve it? Pls update if any – sasi Feb 28 '20 at 14:20

remove the letter-spacing for last letter while entering 4 digit pin?

0 Answers0