Search code examples
jqueryhtmlcssmulti-selectbootstrap-multiselect

How to position checkbox label


I am trying to position my checkbox label to a certain position using margin-top: 15px; but for some reason, it's getting applied only to checkbox not the label but at the same time margin-right: 20px; is getting applied to the label.

$(function() {
  $('#lstStates').multiselect({});
});
.multiselect-container label input {
  margin-right: 20px;
  margin-top: 15px;
}

.multiselect-container>li>a {
  padding: 12px;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css">
<script type="text/javascript" src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>

<select size="5" name="lstStates" multiple="multiple" id="lstStates">
  <option value="NJ">New Jersey</option>
  <option value="NY">New York</option>
  <option value="OH">Ohio</option>
  <option value="TX">Texas</option>
  <option value="PA">Pennsylvania</option>
  <option value="GG">asdfa</option>
  <option value="AW">jghjh</option>
  <option value="AE">qwer</option>
</select>

Fiddle


Solution

  • It's override by bootstrap css

    just add this:

    .multiselect-container>li>a>label.checkbox, 
    .multiselect-container>li>a>label.radio {
        margin-top:15px
    }
    

    http://jsfiddle.net/can9key3/