How to edit the select form arrow? (Bootstrap 4)
If you could use Select2, the solution will be simple by adding costum class like :
$("#myList").select2({
containerCssClass: "customClass"
});
Hope this helps.
$("#myList").select2({
containerCssClass: "customClass"
});/* select2 version 4.0.0 Beta 2 */
.select2-container--default .customClass.select2-selection--single{
border-radius: 24px;
height: 40px;
padding-top: 5px;
}
.select2-container--default .customClass.select2-selection--single .select2-selection__arrow b{
border-color: #00b37c transparent transparent transparent;
border-width: 8px 8px 0 8px;
margin-left: -22px;
}
.select2-container--default.select2-container--open .customClass.select2-selection--single .select2-selection__arrow b{
border-color: transparent transparent #00b37c;
border-width: 0px 8px 8px;
margin-left: -22px;
}
.select2-container--default .customClass.select2-selection--single .select2-selection__arrow{
padding-top: 5px;
height: 35px;
}
.select2-container--default .customClass.select2-selection--single .select2-selection__rendered{
color: #00b37c;
font-family: monospace;
font-size: 16px;
margin-left: 8px;
height: 40px;
}<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.js"></script>
<select id="myList" style="width:300px">
<option value="A">Protection Form</option>
<option value="B">Option 2</option>
<option value="C">Option 3</option>
<option value="D">Option 4</option>
</select>The .custom-select class is already there (Bootstrap 4). To change the arrow of the select input you just override the background property. So for example:
.custom-select { background: none; }
removes the arrow.
Just an example. You can use it as reference.
In this example you will learn the way to custom the selectbox. However, in my experience. Old browsers doesn't support this method.
select {
background-image:
linear-gradient(45deg, transparent 50%, red 60%),
linear-gradient(135deg, red 40%, transparent 50%) !important;
background-position:
calc(100% - 30px) 14px,
calc(100% - 20px) 14px,
100% 0;
background-size:
10px 10px,
10px 10px;
background-repeat: no-repeat;
-webkit-appearance: none;
-moz-appearance: none;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<div class="form-group">
<label for="exampleSelect1">Example select</label>
<select class="form-control" id="exampleSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>Hope it helps!