CODEWITHSUNDEEP
htmlwordpresscsscss-selectors
Joe Bloggs
Joe Bloggs

Reputation: 1462

CSS - Selectors - extra content between the Checkbox and the Label

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?

Upvotes: 0

Views: 137

Answers (4)

xzegga
xzegga

Reputation: 3149

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/

Upvotes: 0

Sandeep C. Nath
Sandeep C. Nath

Reputation: 927

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

Upvotes: 1

Arnold Gandarillas
Arnold Gandarillas

Reputation: 4322

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

Upvotes: 1

VdeVentura
VdeVentura

Reputation: 2101

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>

Upvotes: 0

Related Questions