HTML , CSS , Dropdown Arrow , Select

Question

I have created fiddle here, which shows select and dropdown arrow.

My problem is that the arrow is created using CSS and positioned on top of select. however click on arrow doesn't open dropdown.

is there a way to use that css as background of select like we do when we use image arrow.
or is it possible to simulate the behavior on arrow click?

.selectClass {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    -moz-appearance: none;
    border: none;
    width: 100px;
    background: #EEE;
    height: 30px;
    font-size: 20px;
    padding-left: 5px;
}
.dropDownArrow {
    position: relative;
    margin-left: 75px;
    margin-top: -20px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #555;
}

<select class="selectClass">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
</select>
<div class="dropDownArrow"></div>

> jsfiddle.net/sumant/tme6yyqq/1

Sumant
– Sumant

2015-04-08 21:34:57 +00:00
Commented Apr 8, 2015 at 21:34 — Sumant
– Sumant, Commented Apr 8, 2015 at 21:34

Shomz · Accepted Answer · 2015-04-08 23:23:45Z

2

By far the simplest solution here would be to ignore the mouse clicks on the arrow and let the clicks "go through" by using pointer-events: none;. That's the only needed change to your code, see it here:

.selectClass {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  -moz-appearance: none;
  border: none;
  width: 100px;
  background: #EEE;
  height: 30px;
  font-size: 20px;
  padding-left: 5px;
}
.dropDownArrow {
  pointer-events: none;
  position: relative;
  margin-left: 75px;
  margin-top: -20px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #555;
}

<select class="selectClass">
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>
<div class="dropDownArrow"></div>

answered Apr 8, 2015 at 23:23

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Shomz Over a year ago

@PaulSmith, thank you! I really think it's time to let the old IE versions die, especially with the auto-updated they have... OP: I'm afraid there is no alternative to this rule, but there are other outside the box solutions, such as using the arrow as the select background image.

Sumant Over a year ago

glennnaessens.com/pointer-events-none-in-ie couldn't get the idea completely. @PaulSmith did you try above code on IE? < I don't have access to it.>

Paul Smith Over a year ago

yes, it won't work for IE 8, 9, and 10, and my concern is that they're still 30% of market share (netmarketshare.com)

Shomz Over a year ago

That's a pretty big number, didn't expect it.

Paul Smith · Accepted Answer · 2015-04-08 23:00:00Z

I would create a parent div around both elements with the background color, move the dropdown arrow behind the select header, make that header background transparent. That way you see the arrow but, are only clicking on the select element box on top:

.dropDownArrow {
  position: absolute;
  left: 75px;
  top: 10px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #555;
}
.selectClass {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  -moz-appearance: none;
  border: none;
  width: 100px;
  background: transparent;
  height: 30px;
  font-size: 20px;
  padding-left: 5px;
  position: absolute;
}
.dropdownWrapper {
  position:absolute;
  width: 100px;
  height: 30px;
  background: #ddd;
}

<div class="dropdownWrapper">
  <div class="dropDownArrow"></div>
  <select class="selectClass">
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
  </select>
</div>

Collectives™ on Stack Overflow

HTML , CSS , Dropdown Arrow , Select

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related