CODEWITHSUNDEEP
htmlcss
Laszlo Robert
Laszlo Robert

Reputation: 37

Making a custom input text type

I want to make this

enter image description here

but I don't know how to make the squares and how to set that in one square only one letter can be entered. So far I wrote this, but I really don't know how to continue.

.input {
  width: 200px;
  border: 1px solid black;
}
<label><b>CNP</b></label>
<input class="input" type="text" name="CNP">

Upvotes: 3

Views: 5944

Answers (4)

Temani Afif
Temani Afif

Reputation: 272723

UPDATE : Thanks to the comments of @Danield I updated with more appropriate unit.

You can use linear-gradient BUT you need to pay attention to different sizes and to the font-family if you want to have one letter inside one slot:

.input {
  /* each letter will take 1ch + 1px and we remove 1px of the last one*/
  width: calc(15 * (1ch + 1px) - 1px);
  border: 1px solid black;
  background: 
  /* 1ch space for the letter + 1px border */
  repeating-linear-gradient(to right, #fff, #fff 1ch, #000 1ch, #000 calc(1ch + 1px));
  font-size: 29px;
  /*since a letter will take 1ch we add 1px to cover the border*/
  letter-spacing: 1px; 
  /*we use a monospace font-family so all the letter will take the same width = 1ch*/
  font-family: monospace;
}
<input class="input" type="text" maxlength="15" name="CNP">
<p>This will work with any font-size</p>
<input class="input" type="text" maxlength="15" name="CNP" style="font-size:35px;">

Upvotes: 3

Youmna Habchy
Youmna Habchy

Reputation: 107

You can implement it using repeating-linear-gradient and spacing but if you want to add the auto tab effect, you have to use jquery, you can find below an ex.: 

<body>
    <link  href="CSS/style.css" rel="stylesheet" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Laborator 2(P6)</title>
    <label style="float:left; margin-right:5px;"><b>CNP</b></label>
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />     
    <style>
        body {
          padding: 20px;
        }

        form > div {
          margin: 0 0 20px 0;
        }

        .inputclass1 {
            width:20px;
            border: 1px solid black;
            float:left          
        }
    </style>
</body>
<script type="text/javascript">
    $(document).ready(function(){
        $('input').keyup(function(){
            if($(this).val().length==$(this).attr("maxlength")){
                $(this).next().focus();
            }
        });
    });
</script>

Upvotes: 0

Simon Courtenage
Simon Courtenage

Reputation: 416

 <!DOCTYPE html>
 <html>
 <head>
 <link  href="CSS/style.css" rel="stylesheet" type="text/css">
 <title>Laborator 2(P6)</title>
 <style>
  input {
    width: 1.5em;
    border: 1px solid black;
  }
 </style>
 </head>
 <body>

 <div>
     <label><b>CNP</b></label>

     <input type="text" size=1 maxlength=1>
     <input type="text" size=1 maxlength=1 style="margin-left:-5px">
     <input type="text" size=1 maxlength=1 style="margin-left:-5px">

 </div>
 </body>

Note that the input element in the CSS is an element selector.

Upvotes: 0

Marcelo Agim&#243;vel
Marcelo Agim&#243;vel

Reputation: 1719

you can do it with javascript but let's keep on html5 and css as you can see here:

Use maxlenght atribute:

<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">

Remember to create a class or use bootstrap class float-left, I used an inline css but that's not a good practice.

If you need a different border on input you can do it with css:

<input type="text" name="my_text[]" maxlength="1" class="my_text">
<style>
.my_text{
    border: 1px solid #000;
    float:left;
}
</style>

Upvotes: 0

Related Questions