如何改变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选项来更改复选框和文本的颜色，但它不起作用。任何帮助都非常有用

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

在下面的代码段中，我在每个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>