How to change border color of Bootstrap-select

Question

For a custom framework like Bootstrap select https://silviomoreto.github.io/bootstrap-select/ how do I change the border color of a select box in Javascript?

I tried this but does not work.

document.getElementById("box").style.borderColor = "red";

Javascript

function validate() {
    var ok = true;

    var box = document.getElementById("box").value;

    if (!box) {
        document.getElementById("box").style.borderColor = "red";
        ok = false;
    } 

    return ok;
}

HTML

<form action="#" onsubmit="return validate()" method="POST">
    <select id="box" name="num" class="selectpicker form-control">
      <option value="" selected="selected">select number</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>

    <div class="text-center">
        <button type="submit" class="btn btn-primary">submit</button>
    </div>
</form>

Answer 1

 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://silviomoreto.github.io//css/highlight.css" rel="stylesheet"> <link href="https://silviomoreto.github.io//css/base.css" rel="stylesheet"> <link href="https://silviomoreto.github.io//css/custom.css" rel="stylesheet"> <link href="https://silviomoreto.github.io//dist/css/bootstrap-select.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> </head> <body> <form id="form1" runat="server"> <div class="row"> <div class="col-xs-3"> <div class="form-group"> <select id="box" name="num" class="selectpicker form-control" data-style="warning"> <option value="" selected="selected">Select number</option> <option value="1">1</option> <option value="2">2</option> </select> <input type="button" style="width: 180px; height: 30px" onclick="changeColor()" value="Validate"/> </div> </div> </div> </form> <script> function changeColor() { document.getElementById("box").style.borderColor = "red"; document.getElementById("box").style.borderWidth = "1px"; return false; } </script> </body> </html>

You can override the CSS

.bootstrap-select{ border: 1px solid red //sample }

Hope this helps

Update: By using JavaScript, this can be done as shown below (considering all required JS file as added already)

<form id="form1" runat="server">
        <div class="row">
            <div class="col-xs-3">
                <div class="form-group">

                    <select id="box" name="num" class="selectpicker form-control" data-style="warning">

                        <option value="" selected="selected">Select number</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>

                    <input type="button" style="width: 10px; height: 30px" onclick="changeColor()" value="Validate"></input>
                </div>
            </div>
        </div>
    </form>

    <script>
        function changeColor() {
            document.getElementById("box").style.borderColor = "red";
            document.getElementById("box").style.borderWidth = "1px";
            return false;
        }

    </script>

Answer 2

If you see the DOM element generated by bootstrap-select , it actually hides the original select element and creates its own structure with div , span and buttons . There isn't any official documentation provided to change its border , but as a workaround you could do it as below:

You need to change border of the button whose class is btn dropdown-toggle btn-default , which is generated by bootstrap-select . Since the element created will not be given any id we will make use of its class with document.getElementsByClassName("classnames")[0]

document.getElementsByClassName("btn dropdown-toggle btn-default")[0].style.borderColor = "red";

Update

Explanation in comments.

 $(document).ready(function() { //add a change event to each selectpicker $('.selectpicker').selectpicker().on('change', function() { var id = $(this).attr('id'); //get current element's id var selected = $(this).find("option:selected").val(); //get current element's selected value var condition = false; //default false to form valid $(this).selectpicker('setStyle', 'btn-danger', selected == "" ? "add" : "remove"); if (id == "box") {//if its first select box condition = !(selected == 2 || selected == ""); //check if its value==2 or value=="" so that form validation depends of respective selects $("#box2").selectpicker(selected == 2 ? "show" : "hide").val(""); //show or hide box2 based on selected val $("#box2").selectpicker('setStyle', 'btn-danger',"remove"); //remove danger from 2nd selectpicker when its hidden or shown } else { condition = !(selected == ""); //if its box 2 check if any value is selected } $(this).closest('form').data('valid', condition); //set it to form's data-valid attribute }); $("#box2").selectpicker('hide');//default hide on page load //form submit event instead of validate() inline function $("form").on("submit", function(e) { e.preventDefault();//prevent default action of submit var isValid = $(this).data('valid');//check if its valid if (!isValid) { //if not valid loop through each selectpicker $.each($('.selectpicker'),function(){ var selected=$(this).val(); //check appropriate values for each select and set/remove the btn-danger class for respective selectpickers $(this).selectpicker('setStyle', 'btn-danger', selected == "" ? "add" : "remove"); }) } else{ alert(isValid); //Submit your form } }) });

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script> <!--add data-valid attribute to form to make sure its valid or not and default to false--> <form action="#" data-valid="false" method="POST"> <select id="box" name="num" class="selectpicker form-control"> <option value="" selected="selected">select number</option> <option value="1">1</option> <option value="2">2</option> </select> <select id="box2" name="num" class="selectpicker form-control"> <option value="" selected="selected">select number</option> <option value="1">1</option> <option value="2">2</option> </select> <div class="text-center"> <button type="submit" class="btn btn-primary">submit</button> </div> </form>

How to change border color of Bootstrap-select

Question

2 answers

solution1
2 2016-08-09 13:28:13

solution2
1 ACCPTED 2016-08-09 13:23:36

How to change border color of Bootstrap-select

Question

2 answers

solution1 2 2016-08-09 13:28:13

solution2 1 ACCPTED 2016-08-09 13:23:36

solution1
2 2016-08-09 13:28:13

solution2
1 ACCPTED 2016-08-09 13:23:36