Флажок как кнопка для раскрытия скрытой иконки с: отмечен

Question

То, что я пытаюсь выполнить, это открыть скрытую иконку (.complete) после выбора (отмечено). Значок (.complete) - это sibling этого флажка. Как я могу показывать значок только тогда, когда установлен флажок? Какого рода селектор CSS я ищу?

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

Вот fiddle, чтобы показать вам, что я работаю с.

Answer 1

Вы ищете переключатель ~ или General Sibling.

Вот скрипка его в действии: http://jsfiddle.net/ZurAk/173/

И подробнее здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

Answer 2

Вы на самом деле были это в основном правильно - все, что вам нужно было избавиться от ярлыка в селекторе :checked.

input.social_check:checked + label i.complete матчи «i.complete, который является дочерним лейблом, который непосредственно следует проверяемое вход с классом social_check»

Ваш i.complete было сразу после флажком, так что вам просто нужно использовать это:

input.social_check:checked + i.complete