В настоящее время мы используем изображение как флажок, используя CSS, теперь, когда я нажимаю флажок, я хочу скрыть изображение и показать цвет фона

Question

В настоящее время мы используем изображение как флажок, используя CSS, теперь, когда я нажимаю флажок, я хочу скрыть изображение и показать цвет фона.

Моя демонстрация:

Что мне нужно?

Answer 1

Я только что спрятал флажок. Это работает только с HTML и CSS.

Надеюсь, это поможет вам.

.demofile label {
  margin: 10px;
}

.demofile {
  position: relative;
  width: 100px;
  float: left;
  margin: 10px;
  display: table;
}

.demofile label span {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  text-align: center;
}

.demofile label img {
  height: 100px;
  width: 100px;
  opacity: 1;
}

.demofile input[type=checkbox]:checked+label img {
  opacity: 0.5;
}

.demofile input[type=checkbox]:checked+label .bgcolor {
  background: green;
  height: 100px;
  width: 100px;
  left: 0;
  top: 0;
  position: absolute;
  margin: 0 10px;
  color: #fff;
}

<div class="demofile">
  <input type="checkbox" id="n1" name="n1" style="display: none;" /><label for="n1"><img src="https://www.kcloudtechnologies.com/wp-content/uploads/2016/04/dummy-post-square-1-300x300.jpg" width="20" height="20" />
<div class="bgcolor"><span>text value</span></div>
</label>
</div>

<div class="demofile">
  <input type="checkbox" id="n2" name="n2" style="display: none;" /><label for="n2"><img src="https://www.kcloudtechnologies.com/wp-content/uploads/2016/04/dummy-post-square-1-300x300.jpg" width="20" height="20" />
<div class="bgcolor"><span>text value</span></div>
</label>
</div>


<div class="demofile">
  <input type="checkbox" id="n50" name="n50" style="display: none;" /><label for="n50"><img src="https://www.kcloudtechnologies.com/wp-content/uploads/2016/04/dummy-post-square-1-300x300.jpg" width="20" height="20" />
<div class="bgcolor"><span>text value</span></div>
</label>
</div>

Answer 2

Вы можете просто изменить его видимость на скрытую.