Boris Kozarac Boris Kozarac - 2 years ago 139
Javascript Question

Trigger select dropdown on pseudoelement

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.

enter image description here


<option selected>jkjhhkl</option>


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;

Answer Source

I guess this is what you're looking for:

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download