Increase length of dots on border

Question

I am using an input in one of my projects and I'm making a dotted line on the bottom. Ideally, I would like to have about 5 dots about 10px wide each. Kind of like the example below:
________ ________ _______ ______ _____.

This is the code that I have so far :

input {
  border-bottom: 3px tomato dotted;
}

<input type="text" numbers-only>

@AlvaroMenéndez there is a code in the question – Temani Afif Mar 01 '21 at 22:08 — Temani Afif, Mar 01 '21 at 22:08

score 3 · Accepted Answer · answered Mar 01 '21 at 22:03

3

Use gradient

input {
  border-bottom: 3px solid tomato;
  border-bottom:none;
  background:repeating-linear-gradient(to right,tomato 0 10px,transparent 0 15px) bottom/100% 3px no-repeat;
}

<input type="text" numbers-only/>

answered Mar 01 '21 at 22:03

Temani Afif

245,468
26
309
415

score 0 · Answer 2 · answered Mar 01 '21 at 22:10

Try using a background with linear-gradient to get 5 lines like this:

input {
  border-bottom: none;
  background-image: linear-gradient(to right, black 90%, white 0%);
  background-position: bottom;
  background-size: 40px 1px;
  background-repeat: repeat-x;
}

<input type="text" numbers-only />

score 0 · Answer 3 · answered Mar 01 '21 at 22:10

I don't think there's a way to change the default styling of the dotted border type.

This answer uses the background-image property with a gradient to simulate a border.

You can use this trick on an element behind your input like the following example.

#my-input {
  /* Keep form compatability by
     using an inline display type */
  display: inline-block;
  
  /* Make some space at the bottom
     for the gradient to show under
     the input */
  padding-bottom: 2px;
  
  background-image: linear-gradient(to right, tomato 50%, transparent 0%);
  background-position: bottom;
  background-size: 20px 2px;
  background-repeat: repeat-x;
}

#my-input input {
  border-bottom: 0;
}

<div id="my-input">
  <input type="text">
</div>

Increase length of dots on border

3 Answers3