I have successfully managed to apply a different style to my normal select elements if the selected option is the first one (the placeholder) with jQuery like so :
<script type="text/javascript">
$(document).ready
(
function ()
{
$('select').each(function (index, value)
{
if($(this).val()==="")
{
$(this).css('font-style', 'italic');
$(this).css('color', '#636c72');
$(this).children().css('font-style', 'normal');
}
else
{
$(this).css('font-style', 'normal');
$(this).css('color', 'black');
$(this).children().css('font-style', 'normal');
}
});
}
);
</script>
However, some of my forms are using the bootstrap-select component due to the sheer amount of entries they contain (can be thousands) and the necessity of having a way to narrow down the entries with text searches. Those components produce MUCH more complicated HTML and the above code does not work at all.
I am trying to find a way to apply the same logic as with my normal selects : style the input in italic and with a different color if the option selected is the first one. Here is an example of such select :
<select class="form-control selectpicker" id="medFilter" name="medFilter" th:value="${medFilter}"
onchange="this.form.submit()" data-live-search="true" title="Select Med">
<option value="">Search Med</option>
<option th:each="med : ${meds}" th:value="${med.id}"
th:text="${med.toString()}" th:selected="${med.id == medFilter}">
</option>
</select>
Has anyone ever been able to achieve this?
from Style bootstrap-select "placeholder" differently
No comments:
Post a Comment