mardi 6 octobre 2020

Make label aligned to custom checkbox

Followup to this question Make custom checkbox label text row breaks like normal.

I have a custom checkbox and I want to make the label text align with the checkbox span element.

I tried a few thing but nothing seems to move anything. How can thi be solved?

      input[type="checkbox"].custom-switch {
        display: none;
      }

     .switch{
    display: inline-flex;
  }

  .switch:before {
    width: 30px;
    min-width: 30px;
    height: 15px;
    border-radius: 15px;
    border: 2px solid #ddd;
    background-color: #EEE;
    content: "";
    margin-right: 5px;
    transition: background-color 0.5s linear;
  }
  
  .switch:after {
    width: 11px;
    height: 11px;
    border-radius: 15px;
    background-color: #fff;
    content: "";
    transition: margin 0.1s linear;
    box-shadow: 0px 0px 5px #aaa;
    position: absolute;
    margin-top: 2px;
    margin-left: 2px;
  }

  input[type="checkbox"].custom-switch + label {
    cursor: pointer;
  }

  input[type="checkbox"].custom-switch:checked + label > .switch:before {
    background-color: #1a94ff;
  }
  
  input[type="checkbox"].custom-switch:checked +  label >.switch:after {
    margin: 2px 0 0 17px;
  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div>
  <input class="custom-switch" id="updateAllCheckbox" type="checkbox" style="top: 2px;">
  <label for="updateAllCheckbox" style="font-weight: normal; font-family: inherit;">
    <span class="switch"></span>
    Some text about updating
    <select class="form-control dropdownUpdate" style="width: 90px; display: initial; padding: 0px; height: 23px; margin-right: 3px;;margin-left: 5px;">
    <option value="red">Newest Ver</option>
    <option value="yellow">Old Version</option>
    <option value="green">Outdated Ver</option>
  </select>
  Even more text to format
  </label>
</div>
<br />
<br />
<br />
<div>
  <input class="custom-switch" id="test3" type="checkbox" style="top: 2px;">
  <label for="test3" style="font-weight: normal; font-family: inherit;">
    <span class="switch"></span>
    Checkbox with custom switch without a select element
  </label>
</div>

Update:

enter image description here




Aucun commentaire:

Enregistrer un commentaire