Bootstrap 3 <select> move down arrow left and change your block color
I'm not sure if this is possible, but we have a normal input with various options nested in it. It has a white background and the down arrow (caret) is on the right. A client of mine asked me if I could swap the left arrow and change its background color. So far, there is no luck in changing it, so if anyone can suggest a solution it would be great!
The code looks like this:
<select id="categories"class="form-control" ng-model="type" ng-change="typeChange()">
<option value="silent">Show: Silent</option>
<option value="live">Show: Live</option>
<option value="buy it now">Show: Buy it now</option>
<option value="pledge">Show: Pledge</option>
<option value="sold">Show: Sold</option>
<option value="winning">Show: Winning</option>
<option value="losing">Show: Losing</option>
<option value="favourites">Show: Favourites</option>
<option value="current">Show: Current Bid Amount</option>
<option value="" selected>Show: All</option>
</select>
As you can see this is an angular project, so I am looking for a solution that matches 100% CSS perfectly, or perhaps JS and CSS.
source to share
.styled-select #categories {
background: transparent;
width: 268px;
padding: 5px 5px 5px 30px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}
.styled-select {
width: 240px;
height: 34px;
overflow: hidden;
background: url(http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg) no-repeat left #ddd;
border: 1px solid #ccc;
}
<div class="styled-select">
<select id="categories" class="form-control" ng-model="type" ng-change="typeChange()">
<option value="silent">Show: Silent</option>
<option value="live">Show: Live</option>
<option value="buy it now">Show: Buy it now</option>
<option value="pledge">Show: Pledge</option>
<option value="sold">Show: Sold</option>
<option value="winning">Show: Winning</option>
<option value="losing">Show: Losing</option>
<option value="favourites">Show: Favourites</option>
<option value="current">Show: Current Bid Amount</option>
<option value="" selected>Show: All</option>
</select>
</div>
Basically the little arrow box is replaced with an image and I set it to the left side of the select box. It was from:
http://bavotasan.com/2011/style-select-box-using-only-css/
And from:
How can I customize a select element via css?
Brino provided another way to do this, but he left the original small arrow box on the right and customized on the left in his example. If you prefer this way, you can use direction: rtl
and only have 1 container per select box. Here's his fiddle with the fix .
source to share
One solution is to hide the existing arrow and add a new arrow with the appropriate css. I changed the code from this answer .
See a working example here .
Html
<label class="custom-select">
<select id="categories" class="form-control" ng-model="type" ng-change="typeChange()">
<option value="silent">Show: Silent</option>
<option value="live">Show: Live</option>
<option value="buy it now">Show: Buy it now</option>
<option value="pledge">Show: Pledge</option>
<option value="sold">Show: Sold</option>
<option value="winning">Show: Winning</option>
<option value="losing">Show: Losing</option>
<option value="favourites">Show: Favourites</option>
<option value="current">Show: Current Bid Amount</option>
<option value="" selected>Show: All</option>
</select>
</label>
CSS
label.custom-select {
position: relative;
display: inline-block;
}
.custom-select select {
padding-left: 20px; /*allows space for new arrow*/
-webkit-appearance: none; /*removes original arrow*/
}
/* Select new arrow styling */
.custom-select:after {
content: "▼";
position: absolute;
top: 0;
left: 80;
height: 100%;
font-size: 60%;
padding: 12px 7px;
background: #000;
color: white;
pointer-events: none;
}
.no-pointer-events .custom-select:after {
content: none;
}
source to share