css Question posted in
Some basic documentation can be found here.

Css – 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/[email protected]/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/[email protected]/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/[email protected]/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?

Tags:

2

Answers


  1. 0

    Use the CSS selector .bootstrap-select > .dropdown-toggle and set the background on that. So in your case, it would be:

    .bootstrap-select > .dropdown-toggle {
  background-color: lightgoldenyellow;
}

    Though, as Diego D mentioned, lightgoldenyellow is not a valid color, so that could also cause you issues.

    Login or Signup to reply.
  2. 0

    Use the bootstrap class form-select and override it with your desire color

    .form-select ,
.form-select:focus,
.form-select:active,
.form-select.show {
    background-color:  #FFC000 !important;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<select class="form-select" aria-label="Default select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search