how to change design of bootstrap-multiselect

Question

I have used this multiselect dropdown in my application and here is its lib link

I can get all function if I use this multiselect dropdown but I am facing design issue.

I would like to design checkbox as below image :

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

I have tried to use inline css to option to change color of checkbox and text but it is not working.Any help is really helpful

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

you want a style like in the image ? – Bourbia Brahim Jan 07 '18 at 14:10 — Bourbia Brahim, Jan 07 '18 at 14:10
@brimos yes i want to style as in image – Priya Jan 07 '18 at 14:13 — Priya, Jan 07 '18 at 14:13

Bourbia Brahim · Accepted Answer · 2018-01-07T15:21:29.500

I think by using some Js to add some element on each option (like adding label or span after each input to obtain desired style)

In the below Snippet , I create after every multiselect option a span

then hide the input checkbox , and apply style to this span in order to simulate a checkbox click .

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

Hi @Priya I changed it to js version , try please now , You can play on background ( remove image , let only green icon , or whatever you want ) — Bourbia Brahim, Jan 07 '18 at 15:24
@VXp thnx for notice yep I think he should use programmatic js method ,as my edited answer — Bourbia Brahim, Jan 07 '18 at 15:30

how to change design of bootstrap-multiselect

1 Answers1