CODEWITHSUNDEEP
htmlcssselect
Sumant
Sumant

Reputation: 276

HTML , CSS , Dropdown Arrow , Select

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.

  1. is there a way to use that css as background of select like we do when we use image arrow.
  2. 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>

Upvotes: 0

Views: 1052

Answers (2)

Shomz
Shomz

Reputation: 37701

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>

Upvotes: 2

Paul Smith
Paul Smith

Reputation: 291

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>

Upvotes: 2

Related Questions