html - 仿select

Question

我正在尝试模仿带有跨度的标签。这是代码:

HTML

<div class="field select-field">
    <select class="form-control">
        <option value="">Select Type of paper</option>
        <option value="1">Essay (any type)</option>
    </select>
    <span class="select" id="select-1">Select Type of paper</span>
</div>

CSS

.select-field {
        position: relative;
    }

    select::-ms-expand {
        display: none;
    }

    .select-field select {
        cursor: pointer;
        overflow: hidden;
        opacity: 0;
        z-index: 10;
    }

    span.select {
        position: absolute;
        width: 100%;
        bottom: 0;
        float: left;
        top: 0;
        left: 0;
        line-height: 38px;
        text-indent: 10px;
        cursor: default;
        z-index: 1;
        font-size: 14px;
        overflow: hidden;
        color: #b1a9bb;
        background: url(images/arrow.png) no-repeat right #e6e7e9;
        border-radius: 6px;
    }

Select标签现在是不可见的，我需要激活它(你可以点击 下拉，span的内容会被JS改变)。

Answer 1

1. 改变select类的位置到relative，
2. 选择标签也必须有相对位置。
3. 例如将 select 标签的高度设置为 38px。
4. 添加 select 类的负顶部位置，-38px。

应该可以。