如何更改Bootstrap-select的边框颜色

2ekbmq32 于 2023-03-10 发布在 Bootstrap

关注(0)|答案(3)|浏览(305)

对于Bootstrap select 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;
}

超文本标记语言

<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>

twitter-bootstrap

来源：https://stackoverflow.com/questions/38851856/how-to-change-border-color-of-bootstrap-select

3条答案

按热度按时间

mum43rcc1#

如果您看到bootstrap-select生成的DOM元素，它实际上隐藏了原始的select元素，并创建了自己的div，span和buttons结构。没有提供任何官方文档来更改它的border，但作为一种解决方案，您可以如下所示：
您需要更改button的边框，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";

更新

注解中的解释。
x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-03-10

fiei3ece2#

<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-选择{边框：1像素实心红色//样本}
希望这能帮上忙
更新：通过使用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>

赞(0）回复(0）举报 2023-03-10

66bbxpm53#

使用这个css

.form-select:focus{
        outline: none !important;
        box-shadow: none !important;
        border: 1px solid #008080;
    }

赞(0）回复(0）举报 2023-03-10

我来回答

如何更改Bootstrap-select的边框颜色

3条答案

相关问题

热门标签

最新问答