Html 模仿精选

我试着模仿一个有跨度的标签。代码如下：

HTML

选择标签现在不可见，我需要激活它。你可以点击下拉菜单，span的内容将由JS更改

将类选择的位置更改为相对， 选择标记也必须具有相对位置。 例如，将select标记的高度设置为38px。 加上减去选择类的顶部位置，-38px。

---

应该能用。

那有什么问题吗？它不能用。。我想，z-index可以解决这个问题，但是没有

<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>

.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;
    }