由于跨度的余量，选择的光标指针不起作用

Question

＆＃13;

＆＃13;

 .select span::before {
        content: "\003F";
        display: inline-block;
        font-family: Simple-Line-Icons;
        font-weight: bold;
        text-align: center;
        width: 16px;
        height: 16px;
        font-size: 14px;
        line-height: 12px;
        padding: 1px;
        color: #c4c4c4;
        background: #ffffff;
        border: 2px solid #e8e8e8;
        border-radius: 2px;
        text-decoration: none;
        margin: 0px 0px 2px 260px;
        /* pointer-events: none; */
        -webkit-transition: .25s all ease;
        -o-transition: .25s all ease;
        transition: .25s all ease;
    }
    select {
        cursor: pointer;
       background: #ffffff;
        border: 2px solid #dfdfdf;
        border-radius: 6px;
        width: 287px;
        height: 31px;
        display: block;
        resize: none;
        outline: none;
        color: inherit;
        font-size: inherit;
        font-family: inherit;
        vertical-align: middle;
    }

＆＃13;

<div class="select" style="margin-bottom:60px;">
     <span></span>
    <select name="slct" id="slct" style="margin-top: -26px;">
      <option>Choose an option</option>
      <option value="1">Pure CSS</option>
      <option value="2">No JS</option>
      <option value="3">Nice!</option>
    </select>
</div>

＆＃13;

＆＃13;

＆＃13;

大家好。我上面的代码显示了选择输入元素，右侧有图标（框中的问号）。

问题是光标指针没有显示在整个选择框中。但是在中间，它没有显示光标指针而且无法点击。我想这是因为margin: 0px 0px 2px 260px;的{​​{1}}。

我无法弄清楚解决方案。我需要在右侧创建的图标，选择带图标的框应显示下拉菜单。

我该怎么做？请帮助我。

非常感谢。

Answer 1

＆＃13;

＆＃13;

.select span::before {
    position:relative;
    z-index:1;
        content: "\003F";
        display: inline-block;
        font-family: Simple-Line-Icons;
        font-weight: bold;
        text-align: center;
        width: 16px;
        height: 16px;
        font-size: 14px;
        line-height: 12px;
        padding: 1px;
        color: #c4c4c4;
        background: #ffffff;
        border: 2px solid #e8e8e8;
        border-radius: 2px;
        text-decoration: none;
        margin: 0px 0px 2px 260px;
        pointer-events: none;
        -webkit-transition: .25s all ease;
        -o-transition: .25s all ease;
        transition: .25s all ease;
    }
    select {
    position:relative;
    z-index:0;
        cursor: pointer;
       background: #ffffff;
        border: 2px solid #dfdfdf;
        border-radius: 6px;
        width: 287px;
        height: 31px;
        display: block;
        resize: none;
        outline: none;
        color: inherit;
        font-size: inherit;
        font-family: inherit;
        vertical-align: middle;
    }

＆＃13;

<div class="select" style="margin-bottom:60px;">
     <span></span>
    <select name="slct" id="slct" style="margin-top: -26px;">
      <option>Choose an option</option>
      <option value="1">Pure CSS</option>
      <option value="2">No JS</option>
      <option value="3">Nice!</option>
    </select>
</div>

＆＃13;

＆＃13;

＆＃13;