增加边框上点的长度答案

【问题标题】：Increase length of dots on border增加边框上点的长度
【发布时间】：2021-03-01 21:53:36
【问题描述】：

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

这是我到目前为止的代码：

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

&lt;input type="text" numbers-only&gt;

【问题讨论】：

@AlvaroMenéndez 问题中有代码

标签： html css input border

【解决方案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;
}

&lt;input type="text" numbers-only/&gt;

【讨论】：

【解决方案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;
}

&lt;input type="text" numbers-only /&gt;

【讨论】：

【解决方案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>

【讨论】：