I want to enlarge the arrow of the select tag and set its background to green. The width of the box must be 100px and the height 50px. I tried a lot of css but it didn't worked out
.select_box{
width: 100;
overflow: hidden;
border: 1 solid #000;
position: relative;
font-size: 12;
padding: 10 15;
margin-left: 10;
margin-top: 5;
}
.select_box:after{
width: 10;
height: 50;
border-left: 6 solid transparent;
border-right: 6 solid transparent;
border-top: 6 solid white;
position: absolute;
top: 40%;
right: 5;
content: "";
z-index: 98;
background-color: green;
background-size: auto;
}
.select_box select{
width: 110;
border: 0;
position: relative;
z-index: 99;
background: none;
}
<div class="select_box">
<select>
<option > Position</option>
<option > Height</option>
<option > Width</option>
</select>
</div>