Adding clickable arrow to dropdown select

user_13818054 0
Viewed 386

I have added select tag but not able to correctly align the arrow inside the select area.It is aligned ouside the select area. Not able to click the arrow also.

Any wrong in the CSS I applied.

.custom-selection select {
  border:none;
  background-color:white;
  color: blue;
  padding: 10px;
  width: 100%;
  border-radius: 10px;
  font-size: 20px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26);
  margin: 0;      
  -webkit-appearance: none;
  -moz-appearance: none;
}
.custom-selection option{
  border-radius: 18px;
}

.custom-selection::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;
  height: 100%;
  text-align: center;
  font-size: 28px;
  color:blue;
  background-color: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.custom-selection:hover::before {
  color:white;
  background-color: rgba(255, 255, 255, 0.2);
}
.custom-selection::after {
  content: "\25bc"; 
  position: absolute;
  top: 0;
  right: 10;
}
<div class="custom-selection">
  <select class="round" id="myselect">

  </select>
</div>

css html
2 Answers

Right, left, top or bottom need to be specified with a unit... Css cannot decide for you:

Problem was in class: .custom-selection::after. It was more complex than basic question, please check comment to get them all.

DEMO:

$("#myselect").on("click", function() {
  if($('.custom-selection.rotate').length > 0){
    $('.custom-selection').removeClass('rotate');
  }
  else{
    $('.custom-selection').addClass('rotate');
  }
});
body{
  background-color:red;
}
.custom-selection{
  position:relative;
  background-color:white;
  border-radius: 10px;
}
.custom-selection select {
  border:none;
  color: blue;
  padding: 10px;
  width: 100%;
  border-radius: 10px;
  font-size: 20px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26);
  margin: 0;      
  -webkit-appearance: none;
  -moz-appearance: none;
  position:relative;
  z-index:2;
  background-color: transparent;
}
.custom-selection option{
  border-radius: 18px;
}

.custom-selection::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;
  height: 100%;
  text-align: center;
  font-size: 28px;
  color:blue;
  background-color: rgba(255, 255, 255, 0.1);
  pointer-events: none;
  display:block;
  z-index:1;
}

.custom-selection:hover::before {
  color:white;
  background-color: rgba(255, 255, 255, 0.2);
}
.custom-selection::after {
  content: "\25bc"; 
  position: absolute;
  top: calc(50% - 9px);
  right: 15px;
  background-color:white;
}
.custom-selection.rotate::after {
  transform: rotate(180deg);
  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-selection">
  <select class="round" id="myselect">
    <option>test</option>
    <option>test2</option>
  </select>
</div>

user_110445420

I had done, position: absolute; float:right to set content on right, and margin-left: -1.5em to move relatively and margin-top: 0.75em same as to move slightly down.

If we use px then its output on mobile or tablet may differ, but here I had used em instead of px. well em and rem mostly used in changing fonts size. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .custom-selection select {
            border:none;
        background-color:white;
        color: blue;
        padding: 10px;
        width: 100%;
        border-radius: 10px;
        font-size: 20px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.26);
        margin: 0;      
        -webkit-appearance: none;
        -moz-appearance: none;
        }
        .custom-selection option{
            border-radius: 18px;
        }

        .custom-selection::before {
        position: absolute;
        top: 0;
        right: 0;
        width: 20%;
        height: 100%;
        text-align: center;
        font-size: 28px;
        color:blue;
        background-color: rgba(255, 255, 255, 0.1);
        pointer-events: none;
        }

        .custom-selection:hover::before {
        color:white;
        background-color: rgba(255, 255, 255, 0.2);
        }
        .custom-selection::after {
        content: "\25bc"; 
        /* changes required it works with any view port*/
        position: absolute;
        float: right;
        margin-left: -1.5em;
        margin-top: 0.75em;
        /* end  */
        }

    </style>
</head>
<body>
    <div class="custom-selection">
        <select class="round" id="myselect">
             <option value="Rajkot">Rajkot</option>
             <option value="Ahmedabad">Ahmedabad</option>
             <option value="Surat">Surat</option>
        </select>
    </div>
</body>
</html>

user_73001630
Related