在框中添加下拉箭头

Question

我想在一个框中添加一个下拉箭头，但是我现在不想要该框中的值，我只想在那个框中添加下拉箭头。请帮助我。

My box 
<div class="boxes">
  <input type="number">
</div>

Answer 1

尝试隐藏第一个中的默认箭头

/* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
 -webkit-appearance: none;
 margin: 0;
 }

 /* Firefox */
 input[type=number] {
 -moz-appearance: textfield;
 }

现在您可以添加另一个箭头并编辑样式，现在从此处添加Font Awesome CDN：--- >> https://www.bootstrapcdn.com/fontawesome/，在HTML代码中添加图标

    <div class="boxes">
        <input type="number">
        <i class="fas fa fa-sort-down"></i>
    </div>

添加您的样式：

    .boxes{
        position: relative;
        width: 175px;
    }
    .boxes i {
        position: absolute;
        right: 10px;
    }

类似此屏幕的输出：