I previously had a default bootstrap user select box with a border-radius style applied:
<div class="container">
<select class="form-control" style="border-radius: 1rem;">
<option value="1">User 1</option>
<option value="2">User 2</option>
<option value="3">User 3</option>
<option value="4">User 4</option>
<option value="5">User 5</option>
</select>
</div>
However, I decided to switch to using the jQuery library select2 for its searching feature, but noticed that the border-radius formatting was lost.
<div class="container">
<select class="form-control js-example-basic-single" style="border-radius: 1rem;">
<option value="1">User 1</option>
<option value="2">User 2</option>
<option value="3">User 3</option>
<option value="4">User 4</option>
<option value="5">User 5</option>
</select>
</div>
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
Is there any way to maintain the border-radius styling when using select2 with my select boxes?