Number input with character border

Question

I'm trying to achieve the layout below but all my attempts have failed. As you can see in the code snippet below, it just doesn't look right on desktop and on iPads.

Basically I have one number input field where visitors input their four digit post code to get the results.

I don't want to create four different inputs and give them borders to get the desired layout.

Can this be done using just one input box?

input {
  background: linear-gradient(to right, #eff1f1, #eff1f1 25px, white 10px, white 40px, #eff1f1 40px, #eff1f1 65px, white 10px, white 80px, #eff1f1 80px, #eff1f1 105px, white 10px, white 120px, #eff1f1 120px, #eff1f1 145px, white 10px, white 160px);
    width: 180px !important;
    height: 30px !important;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 29px;
    padding-left: 5px;
    text-align: left;
    margin: 10px auto -5px auto;
    color: transparent !important;
    text-shadow: 0px 0px 0px #666;
}

<input type="number"></input>

Looks fine to me - I changed `letter-spacing: 29px;` to `letter-spacing: 27px;` for better spacing but overall looks good — StudioTime, Oct 11 '18 at 12:41
@DarrenSweeney I feel that there has to be a better solution than background gradient. — shutupchigo, Oct 11 '18 at 12:43
do you want visitor enters four digits one after another by pressing tab key or what? as you said "Can this be done using just one input box?". what do you mean? — Houy Narun, Oct 11 '18 at 12:58
@HouyNarun No, just one input box styled like how it's shown in the screenshot. Users would just continuesly type without pressing the tab key. Hope that makes sense. — shutupchigo, Oct 11 '18 at 13:05
@shutupchigo, so basically, your problem is it does not layout neatly and nicely on desktop and iPad? — Houy Narun, Oct 11 '18 at 13:26

score 1 · Answer 1 · answered Oct 11 '18 at 12:47

Try this

$(document).ready(function(){
  $(".input").keyup(function(){
    var len=$(this).val().length;
    if(len==4){
     $(".input").blur(); 
    }
  });
});

.box{
height:300px;
width:300px;
}
.input{
  height:40px;
  width:200px;
  background:transparent;
  border:none;
  font-size:25px;
  letter-spacing:36px;
  text-indent:15px;
}

.input:focus{
  outline:none;
}

.inputbg1,.inputbg2,.inputbg3,.inputbg4{
  z-index:-1;
  position:absolute;
  height:44px;
  width:40px;
  background:#f1f1f1;
  border-right:solid 10px #fff;
  border-left:solid 10px #fff;
}

.inputbg1{
left:0px;
}

.inputbg2{
left:50px;
}

.inputbg3{
left:100px;
}

.inputbg4{
left:150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<input type="text"  class="input" max-length="4">
<span class="inputbg1"></span>
<span class="inputbg2"></span>
<span class="inputbg3"></span>
<span class="inputbg4"></span>
</div>

This seems to be working, but when you try to remove digits after entering the last one, it doesn't remove the digits. — shutupchigo, Oct 11 '18 at 12:53

score 1 · Answer 2 · answered Oct 11 '18 at 13:48

If the style layout is your issue, What is about this?

input {
  background: linear-gradient(to right, #eff1f1, #eff1f1 25px, white 10px, white 40px, #eff1f1 40px, #eff1f1 65px, white 10px, white 80px, #eff1f1 80px, #eff1f1 105px, white 10px, white 120px, #eff1f1 120px, #eff1f1 145px, white 10px, white 160px);
  width: 180px !important;
  height: 30px !important;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 29px;
  padding-left: 5px;
  text-align: left;
  margin: 10px auto -5px auto;
  color: transparent !important;
  text-shadow: 0px 0px 0px #666;
  border: none;
}

input:focus {
  outline: none;
}

<input type="text" pattern="\d*" maxlength="4">

Basically, the layout of yours is almost alright, thought. I just remove outline border to make it looks better. Another side note, maxlength is ignore in input type=number read this. Please let me know, should this is what you want or not. Thanks.

score 0 · Answer 3 · answered Sep 10 '22 at 10:35

Found the Below solution , similar to the existing.

single input with Validation , layout wise a all seperate inputs


.otp_field {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
  width: 12.70em;
  font-size: 1em;
}

.otp-wrapper, .otp_field {
  font-family: monospace;
  font-weight: bold;
  letter-spacing: 48px;
}

.otp-wrapper {
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding-bottom: .2em;
  font-size: 200%;
}

.otp-wrapper:after {
  content: "—————";
  line-height: .3em;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
}

<div class="otp-wrapper">
        <input class="otp_field form-control" type="text"
        inputmode="numeric"
        autocomplete="one-time-code"
        pattern="\d{5}" maxlength="5"
        required>
      </div>

Answer from

input text with dashed border and stroke length equal to the characters

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Albert Logic Einstein, Sep 14 '22 at 16:43

Number input with character border

3 Answers3