Struggling to create an inline label with a select element using Bootstrap, I came across this helpful example on jsfiddle: http://jsfiddle.net/kokilajs/1q53pr6j/
<form id="searchForm" method="get" class="form-horizontal" role="form">
<div class="form-group">
<label for="GPA" class="col-xs-2 control-label">GPA :</label>
<div class="col-xs-2">
<input name="GPA" type="number" value="2.5" class="form-control" id="GPA"/>
</div>
<div class="col-xs-8">
<label for="faculty" class="control-label">Faculty:</label>
<select class="form-control" name="faculty">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</form>
Despite my efforts, I couldn't get it quite right. Then, I discovered that there are issues styling <select> elements.
Their documentation advises against using
<select>elements due to styling limitations in WebKit browsers.
This led me to wonder about alternatives. The page didn't provide any specific solutions. Is there a better way to achieve what I wanted without resorting to complex workarounds?
Update: Styling Challenges with <select> Elements
Upon further reading the Bootstrap documentation, they explicitly mention the issue with <select> elements. Should I be concerned about cross-browser compatibility or other issues with using this form element? And if so, what alternatives are available?