Как сделать флажки с изображениями

ProgramBox

Как сделать флажки с изображениями

Post author:admin
Запись опубликована:29 сентября, 2022
Post category:Вопросы по программированию

#html #css #checkbox

#HTML #css #флажок

Вопрос:

На моем веб-сайте есть флажки по умолчанию, на каждом флажке только текст (например, пример).

Возможно ли спроектировать флажки так, чтобы на них были изображения? и, может быть, поставить знак «v» на флажок, если он был выбран?

Я хочу, чтобы это выглядело примерно так:

1. Либо слишком много возможных ответов, либо хорошие ответы были бы слишком длинными для этого формата. Пожалуйста, добавьте подробности, чтобы сузить набор ответов или выделить вопрос, на который можно ответить в нескольких абзацах.

2. Я попытался найти способ создать флажки с изображениями, но не нашел ни одного ресурса, который мог бы мне помочь. Я спрашиваю, знает ли кто-нибудь из вас, ребята, какой-нибудь способ сделать это? даже если вы можете привести меня к любому открытому источнику или привести простой пример?

Ответ №1:

Вот как вы можете имитировать флажок на основе изображения, используя метку

 input {
  display: none
}

/*  switch image  */
label[for="chk1"] {
  display: inline-block;
  text-align: center;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  background: url(http://placehold.it/100/f00);
}
#chk1:checked ~ label[for="chk1"] {
  background: url(http://placehold.it/100/ff0);
}

/*  add content  */
label[for="chk2"] {
  display: inline-block;
  text-align: center;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  position: relative;
}
#chk2:checked ~ label[for="chk2"]::after {
  content: 'V';
  position: absolute;
  left: 0;
  right: 0;
  font-size: 90px;
  font-weight: bold;
  font-family: arial;
}

 <input id="chk1" type="checkbox">
<input id="chk2" type="checkbox">

<label for="chk1"></label>
<label for="chk2"></label>

<div>Click a box to toggle it</div>

1. Это выглядит не очень хорошо. : P

2. @K.Daniek Это не попытка сделать так, чтобы это выглядело хорошо, это показывает, как получить флажок на основе изображения

3. Да, я знаю. Но я думаю, что jquery справится с этим быстрее и лучше, чем чистый css.

4. @K.Daniek Зачем использовать скрипт для вещей, предназначенных для CSS?? … Я действительно не понимаю этого безумия jQuery , использовать его для всего

5. Я фанат jQuery psycho, может быть, именно поэтому. : P

Ответ №2:

Я не думаю, что большинство людей помещают изображения в свои флажки. Они либо заставляют изображение действовать как флажок, как это сделал @LGSon, либо они объединяют изображение и флажок вместе внутри div. Что — то вроде этого:

 function toggleCheck(sibling) {
  var checkBox = sibling.parentNode.getElementsByTagName("input")[0];
  checkBox.checked = !checkBox.checked;
}

 .image-box {
  width: 150px;
  text-align: center;
  background: #E9E8E7;
  padding: 10px;
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
}
.image-box img {
  max-width: 100%;
  display: block;
  margin-bottom: 7px;
}

 <div class="image-box">
  <img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" onClick="toggleCheck(this);" />
  <input id="dogs" type="checkbox" name="dogs" value="Dog">
  <label for="dogs">I like dogs</label>
</div>

1. С какой стати вы используете a span и script, что можно сделать с помощью a label и no script??

2. LGSon, спасибо за отзыв, хотя, как примечание, ваш претенциозный тон немного отталкивает на сайте вопросов и ответов, предназначенном для новичков, чтобы найти помощь. Я использовал диапазон и скрипт, потому что я уже использовал скрипт, позволяющий нажимать на изображение, поэтому для меня имело смысл использовать его повторно. Но label, вероятно, является лучшим выбором, поэтому я обновил свой ответ, чтобы включить ваше предложение.

3. Не собирался никого отпугивать, так что извините, если я это сделал, просто хотел указать, чтобы использовать не script, а ярлык, который создан специально для таких вещей … и, кстати, SO не является сайтом контроля качества для новичков

Метки: Как сделать флажки с изображениями