Bild nicht für Checkbox (CSS) angezeigt

Question

Ich versuche, Bilder als Kontrollkästchen in einem Rasterlayout zu verwenden, aber die Bilder werden nicht angezeigt und ich bin ratlos. Hier ist das relevante css und html. Ich habe die Bildadresse doppelt überprüft, da dies in vielen anderen Posts hier ein Problem war, aber es wird an der Adresse gespeichert, auf die zugegriffen wird. Jede Hilfe wird geschätzt.

body{ 
 
\t width: 100vw; 
 
\t height: 100vh; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
} 
 
.container { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t margin: 0; 
 
} 
 
.jumbotron { 
 
\t width: 100%; 
 
\t float: left; 
 
} 
 
.four { 
 
\t width: 32vw; 
 
\t float: left; 
 
\t margin-left: 2%; 
 
\t /*background-color: #95a5a6;*/ 
 
} 
 
.row { 
 
\t width: 100vw; 
 
\t height: 20vh; 
 
\t clear: both; 
 
\t padding: 0px; 
 
\t margin: 0px; 
 
} 
 
.buttonLabel { 
 
\t cursor: pointer; 
 
} 
 
.button input[type="checkbox"] { 
 
\t display: none; 
 
} 
 
.button input[type="checkbox"] + label { 
 
\t width: 32vw; 
 
\t height: 20vh; 
 
\t display: inline-block; 
 
} 
 
#accomLabel { 
 
\t background: url('../img/shelter.png') no-repeat; 
 
}

<div class="container"> 
 
    <div class="row jumbotron heading"> 
 
     <h1 style="text-align: center;">foo</h1> 
 
     <h3 style="text-align: center;">bar</h3> 
 
    </div> 
 
     <form method="post" id="services_form"> 
 

 
      <div class="row"> 
 

 
      <div class="four"> 
 
       <div class="button"> 
 
       <input type="checkbox" id="accomButton"></input> 
 
       <label class="buttonLabel" for="accomButton" id="accomLabel"></label> 
 
       </div> 
 
      </div> 
 

 
      <div class="four"> 
 
       <div class="button"> 
 
       <input type="checkbox" id="foodButton"></input> 
 
       <label class="buttonLabel" for="foodButton" id="foodLabel"></label> 
 
       </div> 
 
      </div> 
 

 
      <div class="four"> 
 
       <div class="button"> 
 
       <input type="checkbox" id="medicalButton">     </input> 
 
       <label class="buttonLabel" for="medicalButton" id="medicalLabel"></label> 
 
       </div> 
 
      </div> 
 

 
      </div> 
 
    </form> 
 
</div>

Answer 1

scheint in Ordnung, obwohl Sie Eingabe Schließen-Tags nicht benötigen (</input>). Hier ist eine Demo mit placehold.it Bild:

body { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.container { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.jumbotron { 
 
    width: 100%; 
 
    float: left; 
 
} 
 
.four { 
 
    width: 32vw; 
 
    float: left; 
 
    margin-left: 2%; 
 
    /*background-color: #95a5a6;*/ 
 
} 
 
.row { 
 
    width: 100vw; 
 
    height: 20vh; 
 
    clear: both; 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 
.buttonLabel { 
 
    cursor: pointer; 
 
} 
 
.button input[type="checkbox"] { 
 
    display: none; 
 
} 
 
.button input[type="checkbox"] + label { 
 
    width: 32vw; 
 
    height: 20vh; 
 
    display: inline-block; 
 
} 
 
#accomLabel { 
 
    background: url('http://placehold.it/54x54') no-repeat; 
 
}

<div class="container"> 
 
    <div class="row jumbotron heading"> 
 
    <h1 style="text-align: center;">foo</h1> 
 
    <h3 style="text-align: center;">bar</h3> 
 
    </div> 
 
    <form method="post" id="services_form"> 
 
    <div class="row"> 
 
     <div class="four"> 
 
     <div class="button"> 
 
      <input type="checkbox" id="accomButton"> 
 
      <label class="buttonLabel" for="accomButton" id="accomLabel"></label> 
 
     </div> 
 
     </div> 
 
     <div class="four"> 
 
     <div class="button"> 
 
      <input type="checkbox" id="foodButton"> 
 
      <label class="buttonLabel" for="foodButton" id="foodLabel"></label> 
 
     </div> 
 
     </div> 
 
     <div class="four"> 
 
     <div class="button"> 
 
      <input type="checkbox" id="medicalButton"> 
 
      <label class="buttonLabel" for="medicalButton" id="medicalLabel"></label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>