Ответ 1

Замена фона фонового изображения

Позвольте создать этот

Это очень простой пример с использованием псевдоэлемента :before, а также :checked и :hover.

С помощью этого чистого HTML

<input type="checkbox" id="inputOne" />
<label for="inputOne"></label>

Обратите внимание на соответствующие атрибуты for и id, это прикрепляет метку к флажку. Кроме того, порядок элементов очень важен; метка должна появиться после ввода, чтобы мы могли стилизовать с помощью input:checked

Как и этот базовый CSS

• Флажок скрыт display: none, и все взаимодействие выполняется с помощью метки

• Псевдоэлемент :after задается типом unicode (\2714), но это также можно отметить фоновым изображением.

• Зубчатый край, вызванный радиусом границы, может быть смягчен согласованным цветом box-shadow. Внутренний край границы отлично выглядит, когда фоновое изображение не является сплошным блоком цвета.

• transition: all 0.4s создает плавное затухание ввода/вывода для границы.

Я добавил дополнительные рекомендации в комментариях CSS.

Полный пример

input[type=checkbox] {
  display: none;
}
/* 
- Style each label that is directly after the input
- position: relative; will ensure that any position: absolute children will position themselves in relation to it
*/

input[type=checkbox] + label {
  position: relative;
  background: url(http://i.stack.imgur.com/ocgp1.jpg) no-repeat;
  height: 50px;
  width: 50px;
  display: block;
  border-radius: 50%;
  transition: box-shadow 0.4s, border 0.4s;
  border: solid 5px #FFF;
  box-shadow: 0 0 1px #FFF;/* Soften the jagged edge */
  cursor: pointer;
}
/* Provide a border when hovered and when the checkbox before it is checked */

input[type=checkbox] + label:hover,
input[type=checkbox]:checked + label {
  border: solid 5px #F00;
  box-shadow: 0 0 1px #F00;
  /* Soften the jagged edge */
}
/* 
- Create a pseudo element :after when checked and provide a tick
- Center the content
*/

input[type=checkbox]:checked + label:after {
  content: '\2714';
  /*content is required, though it can be empty - content: '';*/
  height: 1em;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  color: #F00;
  line-height: 1;
  font-size: 18px;
  text-align: center;
}

<input type="checkbox" id="inputOne" />
<label for="inputOne"></label>