如何在CSS中创建带有方向向下箭头的自定义下拉菜单

Question

对于自定义 HTML 下拉菜单，我想使用 CSS 获得方向向下箭头样式。但是我无法实现示例图像中描述的下拉菜单的方向箭头图标样式。到目前为止，我只得到代码片段中的三角形向下箭头。我怎样才能得到向下的方向箭头而不是实心三角形？

     select {

          /* styling */

          background-color: white;

          border: thin solid blue;

          border-radius: 4px;

          display: inline-block;

          font: inherit;

          line-height: 1.5em;

          padding: 0.5em 3.5em 0.5em 1em;

          background-image:

            linear-gradient(45deg, transparent 50%, gray 50%),

            linear-gradient(135deg, gray 50%, transparent 50%),

            linear-gradient(to right, transparent, transparent);

          background-position:

            calc(100% - 20px) calc(1em + 2px),

            calc(100% - 15px) calc(1em + 2px),

            calc(100% - 2.5em) 0.5em;

          background-size:

            5px 5px,

            5px 5px,

            1px 1.5em;

          background-repeat: no-repeat;

          

          /* reset */

          margin: 0;      

          -webkit-box-sizing: border-box;

          -moz-box-sizing: border-box;

          box-sizing: border-box;

          -webkit-appearance: none;

          -moz-appearance: none;

       }

 <select>

       <option>option 1</option>

       <option>option 2</option>

       <option>option 3</option>

    </select>

注意：我可以使用上面的 CSS 实现三角形向下箭头。但我需要方向向下箭头图标样式，如下面的屏幕截图所示。

Answer 1

您可以像下面这样调整您的代码：select {  /* styling */  background-color: white;  border: thin solid blue;  border-radius: 4px;  display: inline-block;  font: inherit;  line-height: 1.5em;  padding: 0.5em 3.5em 0.5em 1em;  --g:transparent 50%, gray 50% calc(50% + 1px), transparent calc(50% + 2px);  background-image:     linear-gradient(45deg,  var(--g)),     linear-gradient(-45deg, var(--g));  background-position:     right 20px  top calc(1em + 2px),     right 15px  top calc(1em + 2px);  background-size: 5px 5px;  background-repeat: no-repeat;  /* reset */  margin: 0;  box-sizing: border-box;  -webkit-appearance: none;  -moz-appearance: none;}<select>  <option>option 1</option>  <option>option 2</option>  <option>option 3</option></select>