https://i.stack.imgur.com/Dzifp.jpg
Trying to create a navigation with col-md-9 and select tags but facing an issue where adding a background-color to the div causes the green background of the arrow to disappear.
https://i.stack.imgur.com/A4P9Q.png Please disregard the view as button as it will be changed later.
Below is the HTML code used to create the select:
.select-style {
position: relative;
padding: 0;
margin: 0;
border: 1px solid #ccc;
width: 120px;
height: 30px;
overflow: hidden;
background: transparent url("https://i.imgur.com/qJolQ2D.png") no-repeat 93% 50%;
}
.select-style select {
padding: 5px 8px;
width: 150%;
border: none;
background-color: transparent;
background-image: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.select-style select:focus {
outline: none;
}
.select-style:after {
position: absolute;
content: "";
width: 30px;
height: 100%;
background-color: #90c322!important;
top: 0;
right: -1px;
z-index: -1;
border-radius: 0 1px 1px 0;
}<div class="col-md-9 headerdiv">
<span id="sortby"> Sort By </span>
<div class="select-style" id="style1">
<select>
<option>Position</option>
<option>Position</option>
</select>
</div>
<span id="show"> Show </span>
<div class="select-style" id="style2">
<select>
<option> 5 per page </option>
<option>3 per page </option>
</select>
</div>
<button class="right" value="MORE">1</button>
<button class="right" value="LESS">2</button>
<div id="viewas"> View As</div>
</div>