Trigger select dropdown on pseudoelement

Question

Is there a way to trigger dropdown list (select options) when clicking :after (arrow)? Maybe my code could be better for this design but it is the only solution I finally came up with that works ok.

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/

Don't use a pseudo-element, instead use a label with the for attribute. — evolutionxbox, Apr 22 '16 at 08:26
http://stackoverflow.com/questions/6992639/can-i-open-a-selectbox-with-javascript — BenG, Apr 22 '16 at 08:26
[_"generated pseudo-elements are just not present at all as far as the DOM is concerned"_](http://stackoverflow.com/a/14001381/1746830) — Rayon, Apr 22 '16 at 08:26

Harish Kumar · Answer 1 · 2016-04-22T09:01:46.197

Here is the code:

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

score 1 · Accepted Answer · answered Apr 22 '16 at 08:57

1

I guess this is what you're looking for: https://jsfiddle.net/2232xzy8/1/

I positioned the select box above the label and label:before and moved the background color only to label element while keeping select's background transparent.

Therefore it looks like you're clicking the arrow but in fact you click the select box.

answered Apr 22 '16 at 08:57

martin

93,354
25
191
226

Brilliant, thank you! I will only add border-left: 4px solid #fff; to :before since that spacing is intented – Boris Kozarac Apr 22 '16 at 09:05

Trigger select dropdown on pseudoelement

2 Answers2