'CSS Arrow on Select Doesn't Click

I have a select drop down with a CSS arrow (and line). If you click anywhere other than the arrow, the drop down opens, but not if you click directly on the arrow. I would like the arrow to be clickable as well.

Here's my code:

.select {
  position: relative;
  z-index: 1;
  background-color: #fff;
  border-radius: 6px;
}

.select:before,
.select:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  z-index: 1;
}

.select:before {
  right: 37px;
  content: '';
  display: block;
  width: 1px;
  height: 22px;
  margin-top: -11px;
  background-color: #636667;
}

.select:after {
  right: 15px;
  width: 0;
  height: 0;
  margin-top: -3px;
  border: transparent 6px solid;
  border-top: #636667 6px solid;
}
<div class="select">
  <select class="form-control" id="state-dropdown">
	<option>Select State</option>
  </select>
</div>
htmlcsshtml-select


Solution 1:[1]

Try to add pointer-events: none.

Solution 2:[2]

The reason it's not working is because the pseudo elements are part of the parent wrapper, but even so, pseudo elements don't work on select elements at all anyway.

The easiest way around this is to use the following CSS to mimic the appearance through the background attribute instead.

For example...

select {
    background: url('image.png') 0px 0px no-repeat #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

This question provides a working example. Here is a link to the fiddle also included in that answer. Credit is due to the answerer of that question for their working example.

Solution 3:[3]

try this one 

<!DOCTYPE html>
<html>
<head>
 <style>
  .select {
  position: relative;
  z-index: 1;
  background-color: #fff;
  border-radius: 6px;
}

select {
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
}

select {
	border: 0 none;
    height: 40px;
    width: 100%;
}


.select:before,
.select:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  z-index: 1;
}

.select:before {
  right: 37px;
  content: '';
  display: block;
  width: 1px;
  height: 22px;
  margin-top: -11px;
  background-color: #636667;
}

.select:after {
  right: 15px;
  width: 0;
  height: 0;
  margin-top: -3px;
  border: transparent 6px solid;
  border-top: #636667 6px solid;
}

.select {
   border: 1px solid #666;
    border-radius: 0;
}
    </style>
</head>
<body>
 
 <div class="select">
  <select class="form-control" id="state-dropdown">
	<option>Select State</option>
  </select>
</div>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Johannes
Solution 2
Solution 3 lalit bhakuni

Related Questions