如何更改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 to选项来更改复选框和文本的颜色，但它不是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>

​