CODEWITHSUNDEEP
htmlcss
kavya
kavya

Reputation: 325

Adding clickable arrow to dropdown select

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>

Upvotes: 2

Views: 1357

Answers (2)

devanggarach
devanggarach

Reputation: 224

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>

Upvotes: 2

MaxiGui
MaxiGui

Reputation: 6348

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>

Upvotes: 2

Related Questions