1

I've been working with cool designs lately. One of the features works in the way that while checkbox is selected, then its font changes to bold. The problem is that while changing the weight of the font it moves another elements a little bit. Any ideas how to prevent it without positioning labels it with absolute position. I've created a snipped which shows the problem.

li{
  list-style:none;
  display:inline-block;
  margin-right:20px
}

input[type="checkbox"]:checked + label{
font-weight:bold;
}
<ul>
  <li>
    <input type="checkbox" id="test">
    <label for="test"> My label 1
  </li>
   <li>
    <input type="checkbox" id="test2">
    <label for="test2"> My label 2
  </li>
  <li>
    <input type="checkbox" id="test3">
    <label for="test3"> My label 2
  </li>
</ul>
Saurav Rastogi
  • 9,575
  • 3
  • 29
  • 41
El Danielo
  • 780
  • 1
  • 8
  • 18
  • 3
    Might be heplful - [Inline elements shifting when made bold on hover](https://stackoverflow.com/questions/556153/inline-elements-shifting-when-made-bold-on-hover), The idea is to reserve space for bolded (or any :hover state styles) content in :after pseudo element and using title tag as a source for content. – Ankit Nov 29 '16 at 14:35
  • set the width of the element you render the text in. – Vladimir M Nov 29 '16 at 14:37

3 Answers3

2

Use text-shadow to mimic the effect:

li {
    list-style:none;
    display:inline-block;
    margin-right:20px
}

input[type="checkbox"]:checked + label{
    text-shadow: 1px 0 0 currentColor;
}
<ul>
  <li>
    <input type="checkbox" id="test">
    <label for="test"> My label 1
  </li>
   <li>
    <input type="checkbox" id="test2">
    <label for="test2"> My label 2
  </li>
  <li>
    <input type="checkbox" id="test3">
    <label for="test3"> My label 2
  </li>
</ul>
roberrrt-s
  • 7,914
  • 2
  • 46
  • 57
1

You can use a small CSS Hack for this.

Just like (this will be font specific):

input[type="checkbox"]:checked + label{
  font-weight: bold;
  display: inline-block;
  margin-right: -2.8px; /* cancel the margin on right that is produced */
}

Have a look at the snippet below:

li{
  list-style:none;
  display:inline-block;
  margin-right:20px
}

input[type="checkbox"]:checked + label{
  font-weight: bold;
  display: inline-block;
  margin-right: -2.8px;
}
<ul>
  <li>
    <input type="checkbox" id="test">
    <label for="test"> My label 1</label>
  </li>
   <li>
    <input type="checkbox" id="test2">
    <label for="test2"> My label 2</label>
  </li>
  <li>
    <input type="checkbox" id="test3">
    <label for="test3"> My label 2</label>
  </li>
</ul>

Hope this helps!

Saurav Rastogi
  • 9,575
  • 3
  • 29
  • 41
  • Probably the best solution when you wish to give the user the best experience possible, although hard to maintain when changing fonts, sizes or so. Upvoted for effort though. – roberrrt-s Nov 29 '16 at 15:02
  • How did you calculate the -2.8 value? – user2277916 Oct 08 '20 at 05:12
  • @user2277916 This is based on the font you are using in your template. This is done by calculating the difference between the width of "normal text" vs "bold text". The difference which came into the above example was approx. 2.8px. I hope this helps! – Saurav Rastogi Oct 09 '20 at 05:54
0

maybe you will try bootstrap, with it you can say: 

<div class="col-md-4">
 <!--CHECKBOX HERE-->
</div>
<div class="col-md-4">
 <!--CHECKBOX HERE-->
</div>
<div class="col-md-4">
 <!--CHECKBOX HERE-->
</div>

Or you do it by yourself, and say: html:

    <div class="myClass">
<!--CHECKBOXES HERE-->
    </div>
    <div class="myClass">
<!--CHECKBOXES HERE-->
    </div>
    <div class="myClass">
<!--CHECKBOXES HERE-->
    </div>

css:

.myClass {
width:33.33333%;
}

hope i was able to help you :)

EDIT

You can also give a div several classes:

<div class="myClass1 myClass2 myClass3">
</div>

So you dont have to add the width in every css rule.

cais
  • 13
  • 5