Search code examples
cssbootstrap-5bootstrap-selectpicker

Bootstrap 5 selectpicker change background-color

The standard in our place is that every input field should be set to color lightgoldenyellow. I cannot set the background-color of selectpicker in Bootstrap 5.

This is my code:

I have also attached the bootstrap/jquery that I have used.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"/>

<!--jQuery-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>

<!-- Bootstrap 5 Font Icon CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<!--Icon Scout-->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">

<!--Bootstrap/jQuery Select picker-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css"/>

<!--<link rel="stylesheet" href="home_test.css">-->
<link rel="stylesheet" href="home.css">

<!--scripts -->
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js"></script>


<div class="container" style="overflow:visible;">
        <select name="instructor_a" id="" style="background-color: lightgoldenyellow;"  class="selectpicker" data-live-search = "true" data-size="3" title="講師選択">
        <?php
            $query_instructor = "SELECT name_ FROM users
            where userlevel = '2'";

            $stmt_instructor = $pdo->prepare($query_instructor);
            //$stmt_interviewee->bindParam(":training_id", $training_id);
            $stmt_instructor->execute();

            $result_query_instructor = $stmt_instructor->fetchAll();

            foreach ($result_query_instructor as $instructors) {
                echo "<option value ='$instructors[name_]'";
                if($instructor_a === $instructors["name_"]) {
                    echo "selected";
                }
                echo">$instructors[name_]</option>";
            }

        ?>
        </select>
</div>

I have tried adding in-line style: style="background-color:lightgoldenyellow;" but no luck.

I have also tried adding a class in selectpicker such as class ="instructor-select", Then in my css file I included ".instructor-select {background-color:lightgoldenyellow; }" still no luck.

How should I override the bootstrap selectpicker style?

Solution

  • I guess your main problem was having used the wrong identifier for the color you wished to address. A valid color name close to what you used is actually lightgoldenrodyellow.

    Now having fixed that, what you need to style are:

    • .bootstrap-select .dropdown-toggle - dropdown box
    • .bootstrap-select > .dropdown-menu li a - all dropdown options
    • .bootstrap-select > .dropdown-toggle:focus - dropdown :focus
    • .bootstrap-select > .dropdown-toggle:hover - dropdown :hover
    • .bootstrap-select > .dropdown-menu li.active a - dropdown value
    • .bootstrap-select > .dropdown-menu li a:active - option selected among many

    Plus it's worth nothing that, with no further stylings, when the <select> has the disabled attribute, the dropdown gets styled with a gray background and a a cursor disallowing any further interaction.

    Here's a full example (including a disabled dropdown):

    .bootstrap-select > .dropdown-toggle, /* dropdown box */
.bootstrap-select > .dropdown-menu li a, /* all dropdown options */
.bootstrap-select > .dropdown-toggle:focus, /* dropdown :focus */
.bootstrap-select > .dropdown-toggle:hover /* dropdown :hover */
{
  background-color: lightgoldenrodyellow;
}

/* dropdown - option selected - shown as the value of the dropdown */
.bootstrap-select > .dropdown-menu li.active a{  
  font-weight: bold;
  color: black;
}

/* dropdown - option selected - shown among the other available options */
.bootstrap-select > .dropdown-menu li a:active {
  color: red;
}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />

<!--jQuery-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />

<!-- Bootstrap 5 Font Icon CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<!--Icon Scout-->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">

<!--Bootstrap/jQuery Select picker-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" />

<!--<link rel="stylesheet" href="home_test.css">-->
<link rel="stylesheet" href="home.css">

<!--scripts -->
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js"></script>

<br>

<div class="container" style="overflow:visible;">
  <select
    name="instructor_a"
    id=""
    class="selectpicker"
    data-live-search="true"
    data-size="3"
    title="講師選択"    
    >
    <option value="1">bogus1</option>
    <option value="2">bogus2</option>
    <option value="3">bogus3</option>
  </select>
</div>

<hr>

<div class="container" style="overflow:visible;">
  <select
    name="instructor_b"
    id=""
    class="selectpicker"
    data-live-search="true"
    data-size="3"
    title="講師選択 - (disabled)"    
    disabled
    >
    <option value="1">bogus1</option>
    <option value="2">bogus2</option>
    <option value="3">bogus3</option>
  </select>
</div>

<hr>