我从这里使用bootstrap-select

我得到的选择是:
在此输入图像描述
我想要的原始选择是(并且应该得到的是):
在此输入图像描述

区别在于背景(尽管非常微妙)。
我的有一种按钮的感觉,这是我不想要的。我希望它像第二个一样简单。

我怎样才能做到这一点?

你可以在这里看到plunkr演示

代码如下:

<head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
      <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.5/css/bootstrap-select.css">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">


    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular-animate.min.js"></script>

</head>
<body>
        <h1>Hello Plunker!</h1>
            &nbsp&nbsp&nbsp
        <select class="selectpicker" multiple>
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
      </select>  

        <script type="text/javascript" src="bootstrap-select.js"></script>
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">   </script>
</body>

提前致谢


只需删除可选主题即可

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

参见 plunkr


是的,即使我刚刚发现......感谢你的努力......但当悬停在我上方时,我仍然收到了不需要的效果......试图控制它......

Ali:你能帮我控制悬停效果吗

悬停悬停与原来的效果相同。在 plunkr plnkr.co/edit/EmljessU6dJvpSrw8jvO?p=preview上查看

好吧……我知道。我问的是如何控制悬停效果。无论如何现在还好。找到了解决方案。编辑 bootstrap-select.js。感谢您的努力