Использование различных изображений для флажков в CSS

Question

Я видел вопросы о том, как заменить флажок изображением, на которое был дан ответ, но у меня есть отдельная проблема. Я пытаюсь сделать форму с несколькими флажками, каждая с другим изображением, которое будет использоваться в качестве кнопки пользователем. Каждый раз, когда я пытаюсь иметь 2 разных изображения, один не будет отображаться, и будет работать только одна кнопка. Любая помощь приветствуется!

Вот мой код:

 .services_form input[type="checkbox"]{ 
 
\t  display:none; 
 
    } 
 

 

 
    .services_form input[type=checkbox]:checked + label 
 
    { 
 
\t  background-color: #bdc3c7; 
 
\t  background-size: 100%; 
 
\t  height: 250px; 
 
\t  width: 250px; 
 
      opacity: 0.5; 
 
\t  display:inline-block; 
 
\t  padding: 0 0 0 0px; 
 
    } 
 

 

 
    .services_form input[type=checkbox] + label 
 
    { 
 
\t  background-size: 100%; 
 
\t  height: 250px; 
 
\t  width: 250px; 
 
\t  display:block; 
 
\t  float: left; 
 
\t  padding: 0 0 0 0px; 
 
\t  cursor: pointer; 
 
    } 
 

 
    #accomButton{ 
 
\t  background: url("button1.png") no-repeat; 
 
    } 
 

 
    #fooBar{ 
 
     background-image: url("button2.png"); 
 
    } 
 

 
    .button { 
 
\t  float: left; 
 
\t  width: 35%; 
 
\t  height: 35%; 
 
\t  border-radius: 15%; 
 
\t  margin: 5% 5% 5% 5%; 
 
    }

<form class="services_form"> 
 
     <div class="accomButton"> 
 
     <input type="checkbox" id="accomButton"></input> 
 
     <label for="accomButton" id="accomLabel"></label> 
 
     </div> 
 
     <div class="button"> 
 
     <input type="checkbox" id="foo"></input> 
 
     <label for"foo" id="fooBar"></label> 
 
     </div> 
 
    </form>

Answer 1

Вы должны использовать background: url("button1.png") no-repeat; не #accomButton, но в #accomLabel, как вы делаете для #fooBar.