[英]How to change border color of Bootstrap-select
对于像Bootstrap这样的自定义框架,请选择https://silviomoreto.github.io/bootstrap-select/如何在Javascript中更改选择框的边框颜色?
我尝试了这个但是没有用。
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>
<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>
您可以覆盖CSS
.bootstrap-select {border:1px solid red // sample}
希望这可以帮助
更新:通过使用JavaScript,可以如下所示完成(考虑已添加的所有必需的JS文件)
<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>
如果您看到bootstrap-select
生成的DOM元素,它实际上隐藏了原始的select
元素,并使用div
, span
和buttons
创建自己的结构。 没有提供任何官方文档来更改其border
,但作为一种解决方法,您可以执行以下操作:
您需要更改class
为btn dropdown-toggle btn-default
的button
的边框,该button
由bootstrap-select
生成。 由于创建的元素将不会得到任何id
,我们将利用自己的class
与document.getElementsByClassName("classnames")[0]
document.getElementsByClassName("btn dropdown-toggle btn-default")[0].style.borderColor = "red";
更新
评论中的解释。
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.