0

I've got the following html setup:

<fieldset>
  <div class="checkbox">
    <label class="justlabel"><input type="checkbox" value="movie"> Movies</label>
  </div>
  <div class="checkbox">
    <label class="justlabel"><input type="checkbox" value="music"> Music</label>
  </div>
  <div class="checkbox">
    <label class="justlabel"><input type="checkbox" value="books"> Books</label>
  </div>
</fieldset>

Here is my fiddle: https://jsfiddle.net/z7aymz5a/20/

I am targeting each checkbox by its value, because the classes the the same for all.

What I would like to achieve is to put a colored circle behind each of the checkboxes, just before the label as on the picture here below

enter image description here

I got as far as putting the circle in, but I just can't figure out how to correctly style it, so it sits after the checkbox, but before the label.

Anyone could pls help me crack this?

Joe Bloggs
  • 1,410
  • 2
  • 24
  • 53

4 Answers4

1

You can try this:

input {
  width: 32px;
}
input::after {
  font-size: 19px;
  line-height: 12px;
  content: "\25CF";
  margin-left: 24px;
}
input[value="movie"]::after {
  color: red;
}
input[value="music"]::after {
  color: blue;
}
input[value="books"]::after {
  color: green;
}
Arnold Gandarillas
  • 3,896
  • 1
  • 30
  • 36
  • Hey Arnold, so far the closest one. The only problem is that I need to get the colored circle just between the checkbox and the label and I can't touch the html because it comes from a different plugin. Your solution adds the circle just on the top of the checkbox. Giving it a bit of margin-left helps, but how do I get the circle in between? – Joe Bloggs Mar 21 '18 at 04:42
1

without touching html and properly positioned

    input {
        margin-right: 20px;
    }

    input::after {
        content: "\25CF";
        font-size: 30px;
        position: relative;
        top: -12px;
        right: -16px;
    }
    input[value="movie"]::after {
        color: red;
    }

    input[value="music"]::after {
        color: blue;
    }

    input[value="books"]::after {
        color: green;
    }
Sandeep C. Nath
  • 927
  • 1
  • 10
  • 22
0

You are almost there, the issue is that input elements don't support pseudo elements. This answer has some more details on the why: https://stackoverflow.com/a/4660434/5269101

So, a solution to your problem would be: 1- wrap the text "music", "movies" and "books" in span elements 2- replace those ::after in your css with ::before and instead of targeting the input elements, target the span elements with a sibling selector.

your css would look like this:

input[value="movie"] ~ span::before {
color: red;
content: "\25CF";
font-size: 2.5em;
}

input[value="music"] ~ span::before {
color: blue;
content: "\25CF";
font-size: 2.5em;
}

input[value="books"] ~span::before {
color: green;
content: "\25CF";
font-size: 2.5em;
}

and your html would be:

<fieldset>
  <div class="checkbox">
  <label class="justlabel"><input type="checkbox" value="movie"> <span>Movies</span></label>
  </div>
  <div class="checkbox">
    <label class="justlabel"><input type="checkbox" value="music"> <span>Music</span></label>
  </div>
  <div class="checkbox">
    <label class="justlabel"><input type="checkbox" value="books"> <span>Books</span></label>
  </div>
</fieldset>
VdeVentura
  • 2,041
  • 2
  • 15
  • 16
  • Many thanks for your help .. the html comes from an external plugin and the checkboxes with their value are created dynamically, so I can't really touch the html much .. – Joe Bloggs Mar 21 '18 at 04:40
0

You can achieve this in a more simple way. Just adding a tag like before your text in the label and formatting it as you want.

.checkbox {
  position: relative;
}
.circle {
  border-radius: 50%;
  width: 12px;
  height: 12px;
  display: inline-block;
  margin-right: 5px;
}
.movie {
  background-color: red;
 }

.music {
  background-color: blue;
}

.books {
  background-color: green;
}

Your html:

<fieldset>
  <div class="checkbox">
    <label class="justlabel"><input type="checkbox" value="movie"> 
    <i class="circle movie"></i>Movies</label>
  </div>
  <div class="checkbox">
    <label class="justlabel"><input type="checkbox" value="music"> 
    <i class="circle music"></i>Music</label>
  </div>
  <div class="checkbox">
    <label class="justlabel"><input type="checkbox" value="books"> 
    <i class="circle books"></i>Books</label>
  </div>
</fieldset>

Fiddle: https://jsfiddle.net/kjcqqh44/13/

UPDATE

For dynamically HTML provided by a plugin, you can use this code you can add the circle with javascript

var checkCircle = document.body.querySelectorAll('input[value][type="checkbox"]');
var checkbox = document.body.querySelectorAll('.checkbox');

for (i=0; i < checkbox.length; i++)
{ 
    var inp = checkbox[i].querySelectorAll('input[value][type="checkbox"]')[0]
  var span = document.createElement('i');
  span.className = 'circle ' + inp.value;
  inp.parentNode.insertBefore(span, inp.nextSibling);
}

https://jsfiddle.net/kjcqqh44/32/

xzegga
  • 3,051
  • 3
  • 25
  • 45