伪元素的触发器选择下拉列表

Question

点击后（箭头）有没有办法触发下拉列表（选择选项）？也许我的代码对于这个设计可能更好，但它是我最终提出的唯一可行的解​​决方案。

HTML

<label>
    <select>
        <option selected>jkjhhkl</option>
        <option>asdfasd</option>
        <option>dfgdfgfd</option>
    </select>
</label>

CSS

select {
    height: 40px;
    background-color: #666;
    color: #f6f6f6;
    font: 400 13px "Open Sans",Arial,"Helvetica Neue",Helvetica,sans-serif;
    padding: 6px 20px;
    overflow: hidden;
    border: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

label {
    position: relative;
    height: 40px;
}

label:after {
    content: '\f107';
    font: 22px "FontAwesome";
    color: #f6f6f6;
    background-color: #333;
    padding: 10px 10px;
}

https://jsfiddle.net/sworj0ta/1/

Answer 1

以下是代码：

HTML：

<div class="styled-select">
<select>
  <option>Here is the first option</option>
  <option>The second option</option>
</select>
</div>

CSS：

.styled-select select {
background: transparent;
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}


.styled-select {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url(http://bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg) no-repeat right #ddd;
   border: 1px solid #ccc;
 }

Answer 2

我想这就是您正在寻找的内容：https://jsfiddle.net/2232xzy8/1/

我将选择框放在label和label:before上方，并将背景颜色仅移至label元素，同时保持select的背景透明。< / p>

因此，您似乎点击了箭头，但实际上您点击了选择框。