CODEWITHSUNDEEP
htmlcss
htoniv
htoniv

Reputation: 1668

How to remove letter-spacing for the last letter of an input field with CSS?

I am trying to partition input field to appear as separate input fields on screen to looks like otp field. I achieved it to some extend from the other SO answer. But still i couldn't get the exact UI result.

My code HTML

<div id="divOuter">
  <div id="divInner">
    <input id="partitioned" type="text" maxlength="4"/>
  </div>
</div>

CSS

#partitioned {
  padding-left: 15px;
  margin-right: -42px;
  letter-spacing: 42px;
  border: 0;
  background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 50px 1px;
  background-repeat: repeat-x;
  background-position-x: 35px;
  width: 190px;
  min-width: 190px;
}

#divInner {
  left: 0;
  position: sticky;
}

#divOuter {
  width: 190px;
  overflow: hidden;
}

Fiddle link

I couldn't find the solution. Need some help.

Upvotes: 0

Views: 528

Answers (1)

alexyorke
alexyorke

Reputation: 4319

The width of #partitioned is too small, and is causing the input field to scroll horizontally to accommodate the last digit. Change the width to width: 220px; and this will fix it:

https://jsfiddle.net/yx1guj3s/

Upvotes: 2

Related Questions