image not displaying for checkbox (css)

Question

I'm trying to use images as checkboxes in a grid layout, but the images won't show and I'm at a loss. Here is the relevant css and html. I have double checked the image address as this has been an issue in many other posts here, but it is stored at the address being accessed. Any help is appreciated.

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('../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>

Syden · Accepted Answer · 2017-01-24 13:43:00Z

1

Seems fine, although you don't need input closing tags (</input>). Here's a demo with placehold.it image:

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>

answered Jan 24, 2017 at 13:43

Syden

8,6455 gold badges30 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lumpofiron Over a year ago

Thanks for the help @Syden, I have removed the closing input tags as you said. The placeholder.it image works perfectly, however the png i have saved locally still doesn't appear. Edit: It turns out the image is too large, thanks for the help :)

Syden Over a year ago

You are welcome, glad you could find the root of the issue :) Regards.

Collectives™ on Stack Overflow

image not displaying for checkbox (css)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related