CODEWITHSUNDEEP
jqueryhtmlcssplaceholderbootstrap-select
Martin
Martin

Reputation: 2245

Style bootstrap-select "placeholder" differently

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?

Upvotes: 9

Views: 5479

Answers (4)

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve expected result, use below options

Option 1: Using CSS , set color and font style to select title and select first option 

select[title]{
  color: green;
  font-style: italic;
}
<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 value="A">AA</option>
                                        </select>

Option 2: Using add class of jquery for select title and option first child

$("select[title]").addClass('selectStyle')
.selectStyle{
  font-style: italic;
  color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 value="A">AA</option>
                                        </select>

codepen - https://codepen.io/nagasai/pen/qGrqPR

Upvotes: 1

noamyg
noamyg

Reputation: 3104

The thing is - bootstrap-select replaces <select> to <button> and <option> to <a>.

That makes your code problematic for two reasons:

  1. Your trying (and probably, succeeding) to style hidden elements (as option and select are being hidden as soon as selectpicker initiates.)
  2. You're binding to document.ready instead of the initialization of bootstrap select.

Use CSS to set the style of the new elements instead of the old ones:

a.placeholder, button.bs-placeholder {
  font-style: italic !important;
  color: #636c72;
}

HTML (Note that bs-placeholder class is out-of-the-box for bootstrap-select when it doesn't have a value, you don't need to add it.):

<select required class="form-control selectpicker" id="medFilter" name="medFilter" title="Select Med">
      <option class="placeholder" selected value="">Search Med</option>
      <option value="med-1">Med 1</option>
      <option value="med-2">Med 2</option>
</select>

As long as it can be archived with css, i'd ditch the document.ready styling approach.

Plunkr: https://plnkr.co/edit/EAbTMz1WQnFWwtLsmYbZ?p=preview

Upvotes: 5

Avanthika
Avanthika

Reputation: 4182

You can do all this with pure css, it will be more manageable than doing it with js. the following styles the input in italic and with a different color if the option selected is the first one.

I've given two examples, one with disabled and hidden, and another without disabled and hidden attributes.

select option {
  color: #000000;
  font-style: normal;
}

select:invalid, select option[value=""] {
  color: red; /* Or any color you want */
  font-style: italic;
}

.form-control {
  margin: 20px 0px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" />

<select required class="form-control selectpicker" id="medFilter" name="medFilter" title="Select Med">
  <option selected value="">Search Med</option>
  <option value="med-1">Med 1</option>
  <option value="med-2">Med 2</option>
  </option>
</select>
<select required class="form-control selectpicker" id="medFilter2" name="medFilter2" title="Select Med 2">
  <option selected disabled hidden value="">Search Med - Another</option>
  <option value="med-1">Med 1</option>
  <option value="med-2">Med 2</option>
  </option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

Upvotes: 2

Inzamam Waikar
Inzamam Waikar

Reputation: 61

$('select[name=medFilter] option:eq(1)')

use this selector and apply your css code to this and set as placeholder.

This will always select nth element (what u have passed in option:eq(1))

Hope this will work. :)

Upvotes: 2

Related Questions