如何更改 bootstrap-multiselect 的设计

Question

我在我的应用程序中使用了这个 multiselect 下拉菜单，这是它的 lib link

如果我使用此 multiselect 下拉菜单，我可以获得所有功能，但我面临设计问题。

我想设计复选框如下图：

<select id="p1" multiple="multiple">
  <option  value="Bootstrap">Bootstrap Tips</option>
  <option value="HTML">HTML</option>
  <option value="CSS">CSS tricks</option>
  <option value="angular">Angular JS</option>
</select>

我尝试使用内联 css 选项来更改复选框和文本的颜色，但它不是 working.Any 帮助真的很有帮助

$(document).ready(function() {
  $('#p1').multiselect();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<header>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css" />
</header>




<select id="p1" multiple="multiple">
        <option  value="Bootstrap">Bootstrap Tips</option>
        <option value="HTML">HTML</option>
        <option value="CSS">CSS tricks</option>
        <option value="angular">Angular JS</option>
    </select>

Answer 1

我想通过使用一些 Js 在每个选项上添加一些元素（比如在每个输入后添加标签或跨度以获得所需的样式）

在下面的代码片段中，我在每个 multiselect 选项之后创建一个跨度

然后隐藏输入复选框，并将样式应用于此跨度以模拟复选框点击。

$(document).ready(function() {
  $('#p1').multiselect();
  $('.multiselect-container input[type="checkbox"]').each(function(index,input){
   $(input).after( "<span></span>" );;
  });
});

.multiselect-container input + span:before {
  float:right;
  content: '';
  background-color:transparent;
  background-image: url("https://cdn3.iconfinder.com/data/icons/iconic-1/32/check_alt-128.png");
  background-repeat:no-repeat;
  background-size :15px;
  display: block;
  width: 15px;
  height: 15px;
  margin-left:35px;
  
}

.multiselect-container span {
  position:absolute;
  right:5px;
  top:5px;
}


.multiselect-container input {
  display:none;
}

.checkbox input:checked + span:before {
  background-image: url("https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<header>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css" />
</header>




<select id="p1" multiple="multiple">
    <option  value="Bootstrap">Bootstrap Tips</option>
    <option value="HTML">HTML</option>
    <option value="CSS">CSS tricks</option>
    <option value="angular">Angular JS</option>
</select>

如何更改 bootstrap-multiselect 的设计

how to change design of bootstrap-multiselect

css

jquery

twitter-bootstrap

bootstrap-multiselect