CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Boris Kozarac
Boris Kozarac

Reputation: 635

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

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/

Upvotes: 0

Views: 1243

Answers (2)

Harish Kumar
Harish Kumar

Reputation: 143

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

Upvotes: 1

martin
martin

Reputation: 96909

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.

Upvotes: 1

Related Questions