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
– evolutionxbox, Commented Apr 22, 2016 at 8:26
"generated pseudo-elements are just not present at all as far as the DOM is concerned" — Rayon
– Rayon, Commented Apr 22, 2016 at 8:26

martin · Accepted Answer · 2016-04-22 08:57:42Z

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.

Brilliant, thank you! I will only add border-left: 4px solid #fff; to :before since that spacing is intented

Harish Kumar · Accepted Answer · 2016-04-22 09:01:46Z

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

Collectives™ on Stack Overflow

Trigger select dropdown on pseudoelement

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related