CODEWITHSUNDEEP
htmlcss
Modelesq
Modelesq

Reputation: 5402

Checkbox as button to reveal hidden icon with :checked

What I'm trying to accomplish is reveal the hidden icon (.complete) upon selection (checked). The icon (.complete) is a sibling of the checkbox input. How would I go about showing the icon only when the checkbox is checked? What kind of css selector am I looking for?

<div class="google btn social facebook googleplus">
    <label for="check_google">
        <input type="checkbox" id="check_google" name="google" class="social_check" />
        <i class="icon-ok-sign complete"></i><i class="icon-google-plus-sign"></i> Google
    </label>
</div>

i.complete{
  visibility: hidden;
}
input.social_check:checked + label i.complete{
  visibility: visible;
}

Here is a fiddle to show you what I'm working with.

Upvotes: 0

Views: 1525

Answers (2)

Sam Dufel
Sam Dufel

Reputation: 17598

You actually had it mostly right - all you needed was to get rid of the label in your :checked selector.

input.social_check:checked + label i.complete matches "i.complete which is a child of a label which immediately follows a checked input with class social_check"

Your i.complete was right after the checkbox, so you just needed to use this:

input.social_check:checked + i.complete

Upvotes: 0

Dryden Long
Dryden Long

Reputation: 10180

You're looking for the ~ or General Sibling selector.

Here is a fiddle of it in action: http://jsfiddle.net/ZurAk/173/

And more info here: https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

Upvotes: 2

Related Questions