CODEWITHSUNDEEP
css
takeradi
takeradi

Reputation: 3861

Custom Dropdown arrow click issue

I am trying to replace the default select box arrow with a font awesome icon. Its styled as I want but when I click on the custom arrow, the dropdown does not open. If i click anywhere else on the select box, things work fine. I have set the z-index of the select box to be higher than that of the arrow. Not sure what the issue is.

body {
  padding: 30px;
}

.dropdown {
  position: relative;
  width: 300px;
}
.dropdown select {
  outline: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-bottom: 1px solid;
  padding: 0 6px 0 6px;
  cursor: pointer;
  width: 100%;
  z-index: 2;
}
.dropdown select:hover {
  border-color: rgba(221, 221, 221, 0.5);
  background: rgba(221, 221, 221, 0.5);
}
.dropdown::after {
  position: absolute;
  font-family: "FontAwesome";
  color: black;
  content: "\f107";
  bottom: 1px;
  right: 4px;
}
.dropdown:hover::after {
  color: gray;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="dropdown">
  <select id="exampleSelect1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
</div>

Upvotes: 2

Views: 6013

Answers (3)

kuldeep chopra
kuldeep chopra

Reputation: 782

This worked for me:

.select-field select {
    position: relative;
    z-index: 2;
}

Upvotes: 0

DACrosby
DACrosby

Reputation: 11450

You can set the arrow to a negative z-index which makes it non-clickable. Meaning, the select will be.

.dropdown::after{
   z-index: -1;
}

The z-index you have set on .dropdown select doesn't do anything because the element is still position: static;. Set it to relative and then just make sure it's higher than the arrow's.

.dropdown select {
   position: relative;
   z-index: 2;
}
.dropdown::after{
   z-index: 1;
}

Upvotes: 3

dokgu
dokgu

Reputation: 6040

Add this to the CSS style for your :after:

pointer-events: none;

So you should have something like this:

.dropdown::after {
  position: absolute;
  font-family: "FontAwesome";
  color: black;
  content: "\f107";
  bottom: 1px;
  right: 4px;
  pointer-events: none;
}

Upvotes: 8

Related Questions