Question

我必须使用选择表单创建下拉列表。我想使用FontAwesome图标：“fa-angle-down”（未选择列表时）和第一个列表项旁边的“fa-angle-up”（列表展开时）。我怎样才能做到这一点？我必须使用JavaScript或jQuery吗？

<body>
    <fieldset>
        <legend>numbers</legend>
        <select name="numbers">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>
     </fieldset>
</body>

Answer 1

我认为您正在寻找强制浏览器为您的选择案例使用自定义CSS以及下拉列表的自定义样式。

您需要先使用span包装一个select元素，然后添加我们将在伪类之前和之后添加的select字段。

在伪类之前，我们将为选择区域的切换按钮添加背景颜色，在伪类之后，我们将使用fontawesome字形添加角度图标。

gpg2

.selectwrap {
  position:relative;
}
.selectwrap::before {
        content:'';
        right:1px;
        top:-8px;
        width:30px;
        height:38px;
        background:#ffffff;
        position:absolute;
        pointer-events:none;
        display:block;
        border-radius: 3px;
    }
    .selectwrap::after {
        content:"\f106";
        font-family: "FontAwesome";
        font-size: 12px;
        right: 12px;
        top:3px;
        color: #c4d3dc;
        padding:0 0 2px;
        position:absolute;
        pointer-events:none;
    }
    .selectwrap:focus::after {
        content: "\f107";
    }
    .selectwrap select {
        padding:7px 15px;
        height: 40px;
        margin: 0;
        background: #eff3f5;
        border:1px solid #e4ebef;
        outline:none;
        display: inline-block;
        -webkit-appearance:none;
        -moz-appearance:none;
        cursor:pointer;
        width: 300px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

希望我的回答可以帮助你。

如何在选择表单中使用图标而不是img？

1 个答案: