如何更改 Bootstrap-select 的边框颜色
How to change border color of Bootstrap-select
对于像 Bootstrap select https://silviomoreto.github.io/bootstrap-select/ 这样的自定义框架,我如何更改 Javascript 中 select 框的边框颜色?
我试过了,但没有用。
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>
如果你看到bootstrap-select
生成的DOM元素,它实际上隐藏了原来的select
元素,并用div
、[=16=创建了自己的结构] 和 buttons
。没有提供任何官方文档来更改其 border
,但作为一种解决方法,您可以按以下方式进行:
您需要更改 button
的边框,其 class
为 btn dropdown-toggle btn-default
,由 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>
<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 https://silviomoreto.github.io/bootstrap-select/ 这样的自定义框架,我如何更改 Javascript 中 select 框的边框颜色?
我试过了,但没有用。
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>
如果你看到bootstrap-select
生成的DOM元素,它实际上隐藏了原来的select
元素,并用div
、[=16=创建了自己的结构] 和 buttons
。没有提供任何官方文档来更改其 border
,但作为一种解决方法,您可以按以下方式进行:
您需要更改 button
的边框,其 class
为 btn dropdown-toggle btn-default
,由 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>
<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>