How to partition input field to appear as separate input fields on screen?

前端 未结 7 1838
半阙折子戏
半阙折子戏 2020-11-29 21:12

Look at the image:

I want design something like in the image, where a 4 digit one time password (OTP) is to be entered by user. Right now I have achieved th

7条回答
  •  夕颜
    夕颜 (楼主)
    2020-11-29 21:43

    This works for me without any extra javascript code.

    #partitioned {
      padding-left: 15px;
      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: 220px;
      min-width: 220px;
    }
    
    #divInner{
      left: 0;
      position: sticky;
    }
    
    #divOuter{
      width: 190px; 
      overflow: hidden;
    }

提交回复
热议问题