僞元素上的觸發器選擇下拉列表

單擊後（箭頭）後是否有觸發下拉列表（選擇選項）的方法？也許我的代碼對這個設計可能會更好，但它是我終於想出的唯一解決方案，可以正常工作。僞元素上的觸發器選擇下拉列表

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/

來源

2016-04-22 Boris Kozarac

請勿使用僞元素，而應使用帶有for屬性的標籤。 – evolutionxbox

http://stackoverflow.com/questions/6992639/can-i-open-a-selectbox-with-javascript – BenG

[_「生成的僞元素根本就不存在，只要DOM相關」_] （http://stackoverflow.com/a/14001381/1746830） – Rayon

我想這是你在找什麼：https://jsfiddle.net/2232xzy8/1/

我定位在label和label:before上面的選擇框，只有移動的背景顏色到label元素，同時保持select的背景透明。

因此，它看起來像你點擊箭頭，但實際上你單擊選擇框。

來源

2016-04-22 08:57:42 martin

輝煌，謝謝！我只會添加border-left：4px solid #fff;到：之前，因爲間距是intented –

下面是代碼：

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

來源

2016-04-22 08:41:39

僞元素上的觸發器選擇下拉列表

回答

相關問題