增加边框上的点的长度

Question

我在我的一个项目中使用输入，并在底部画了一条虚线。理想情况下，我希望有大约 5 个点，每个点宽约 10 像素。有点像下面的例子：
________ ________ _______ ______ _____.

这是我目前拥有的代码：

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

<input type="text" numbers-only>

Answer 1

使用渐变

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/>

Answer 2

尝试使用具有线性渐变的背景来获得 5 行，如下所示：

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 />

Answer 3

我认为没有办法更改 dotted 边框类型的默认样式。

This answer使用background-image属性渐变模拟边框

您可以在输入后面的元素上使用此技巧，如下例所示。

#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

html

css

input

border