增加边框上圆点的长度

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边框类型的默认样式。

这个答案使用带有渐变的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>