Установка флажка checkbox карандашом

Пример:

Установите флажок checkbox Или этот А можно и этот

HTML:

<label class="cb-label">
	<input class="cb pristine" type="checkbox" /> <span>Флажок checkbox</span>
</label>

<input class="cb pristine" type="checkbox" /> <span>Флажок checkbox</span>

</label>

CSS:

cb-label {
	display: flex;
	margin: 10px;
	font-size: 20px;
}
.cb-label span {
	padding: 2px 10px;
	line-height: 1.3;
	display: inline-block;
}
.cb {
	box-shadow: 0 0 0 0.125em rgba(0, 0, 0, 0.75) inset;
	display: inline-block;
	position: relative;
	margin: 0 4px 0 0!important;
	width: 1.5em;
	height: 1.5em;
	font-size: 22px;
	vertical-align: middle;
	-moz-appearance: none;
	-webkit-appearance: none;
}
.cb:before, .cb:after {
	content: "";
	display: block;
	position: absolute;
	animation: none;
}
.cb:before {
	animation: eraseA 0.5s steps(1) forwards;
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABICAMAAABx5AOBAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACcUExURUdwTDMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMwzZNNQAAAAzdFJOUwD9CPf680HnDN0SLGUFwjrjnCK9s4agTAKAbEfXJ+weXBccyTV0z6eWj6TxeVdU0dKqUj+hA9AAAAIXSURBVBgZncAFduNAEATQEoItsszMGN66/9021GMpeXbU+mjGf8td0kkzNJKMHX7J52jA7tC4QM++8CqAmn1hiQut5MQyC1p9ViygFFusGEDHf2DFbAmVImLFrA0Vu8eKbgGdMcu8cQidqcOSaAqlzYwlhzaURheWbAtoxRavXgpozQNeRW1oJT1eLTKoTXjlPENtHtCw9lBLerzqjKAWWzTSFtSKgEbQhtroSMN9ht6TRaMPvXVEoxtC70Qjn0PPdyjcFfTCLY0TGnikcWhBr72g8HzoJT0aYzSwsijSEHrriOJhhwbONB7RQOZRpCFu2/iT82DQHyaosrsUXobbJjk/WUNUTWiMcdvQ47cOKpY5xaGF27oUUQtlHQp3ijv2Dr9ZQ5T4LkUH96xfKTq4CrcU+QZ3nSmiFow9jRj3+Ra/Wf8gioCia+O+8JXiCDGg8DL8pU8RLPFl6lKc8aedQxHjU7iliNb4U5JSpAk+7GnEqGFC4ezwrggoujZqmC8o+ng3oHB81DHqUcxCYOpSDFDPisIaItxSLOaoZxNQDLCnMUZdR4rIDyhmLdT1ROEGNFaobZ3zt9RGfUf+4k6h8MRf3kZQWAb8wdtBY9TjDyfoTFgVFFAZtR1WjKEUHlgWraHVYVkMtZglXRtqmUXDy6BXPNDoo4HWC0Uaooks4JegjWb8nB+8IZpq9xwyGqK58NGb7aDyH2UTzeCLYT1BAAAAAElFTkSuQmCC') 0 100%/1.2em 1.35em no-repeat;
	bottom: 0.2em;
	left: 0.3em;
	width: 0;
	height: 1.35em;
}
.cb:after {
	animation: eraseB 0.5s linear forwards;
	background: linear-gradient(rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 50%) 11.2em 0, linear-gradient(#c8646e, #c8646e) 11.2em 0, linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6) 0.1em, rgba(255, 255, 255, 0) 0.1em, rgba(255, 255, 255, 0) 0.2em, rgba(0, 0, 0, 0.2) 0.2em, rgba(0, 0, 0, 0.2) 0.3em, rgba(0, 0, 0, 0) 0.3em) 9.8em 0/0.3em 100%, repeating-linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6) 0.1em, rgba(255, 255, 255, 0) 0.1em, rgba(255, 255, 255, 0) 0.2em) 10.2em 0/0.5em 100%, linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6) 0.1em, rgba(255, 255, 255, 0) 0.1em, rgba(255, 255, 255, 0) 0.2em, rgba(0, 0, 0, 0.2) 0.2em, rgba(0, 0, 0, 0.2) 0.3em, rgba(0, 0, 0, 0) 0.3em) 10.8em 0/0.3em 100%, linear-gradient(rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.6) 35%, rgba(255, 255, 255, 0.6) 65%, rgba(255, 255, 255, 0) 65%) 9.7em 0, linear-gradient(#b4b4b4, #b4b4b4) 9.7em 0, linear-gradient(rgba(0, 0, 0, 0.1) 27%, rgba(0, 0, 0, 0) 27%, rgba(0, 0, 0, 0) 73%, rgba(0, 0, 0, 0.2) 73%) 2em 0, linear-gradient(#f0d000, #f0d000) 2em 0, linear-gradient(-14deg, #1e1e1e 18%, rgba(30, 30, 30, 0) 20%) 0 0/0.5em 0.5em, linear-gradient(14deg, rgba(30, 30, 30, 0) 80%, #1e1e1e 83%) 0 0.5em/0.5em 0.5em, linear-gradient(-14deg, #d2a078 48%, rgba(210, 160, 120, 0) 50%) 0 0/2em 0.5em, linear-gradient(14deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.1) 50%) 0 0.5em/2em 0.5em, linear-gradient(14deg, rgba(210, 160, 120, 0) 48%, #d2a078 50%) 0 0.5em/2em 0.5em;
	background-repeat: no-repeat;
	border-radius: 0 0.1em 0.1em 0;
	opacity: 0;
	visibility: hidden;
	transform-origin: 0 0.25em;
	width: 12em;
	height: 1em;
}
.cb:checked {
	background-color: transparent;
}
.cb:checked:before {
	animation: drawA 0.5s linear forwards;
}
.cb:checked:after {
	animation: drawB 0.5s linear;
}
.cb:focus {
	outline: transparent;
}
.cb:focus + span {
	color: rgba(0, 0, 0, 0.75);
	outline: transparent;
}
.pristine:before, .pristine:after {
	animation: none;
}
@keyframes drawA {
	from, 5% {
		width: 0;
		height: 1.35em;
	}
	90%, to {
		width: 1.2em;
		height: 1.35em;
	}
}
@keyframes drawB {
	from {
		opacity: 0;
		transform: translate(0em, -0.5em) rotate(-50deg);
		visibility: visible;
	}
	5% {
		opacity: 1;
		transform: translate(0em, 0.3em) rotate(-60deg);
	}
	17% {
		transform: translate(0.25em, 0.8em) rotate(-65deg);
	}
	79% {
		transform: translate(1.1em, -0.14em) rotate(-63deg);
	}
	90% {
		opacity: 1;
		transform: translate(1.2em, -0.15em) rotate(-63deg);
	}
	to {
		opacity: 0;
		transform: translate(1.25em, -1.7em) rotate(-63deg);
	}
}
@keyframes eraseA {
	from {
		width: 1.2em;
		height: 1.35em;
	}
	10% {
		width: 1.2em;
		height: 1.08em;
	}
	27% {
		width: 1.2em;
		height: 0.81em;
	}
	36% {
		width: 1.2em;
		height: 0.7em;
	}
	45% {
		width: 1.2em;
		height: 0.55em;
	}
	55% {
		width: 1.2em;
		height: 0.35em;
	}
	80%, to {
		width: 1.2em;
		height: 0;
	}
}
@keyframes eraseB {
	from {
		opacity: 0;
		transform: translate(0.6em, -12.2em) rotate(90deg);
		visibility: visible;
	}
	10% {
		opacity: 1;
		transform: translate(1.2em, -12.05em) rotate(90deg);
	}
	20% {
		transform: translate(0.6em, -11.9em) rotate(90deg);
	}
	30% {
		transform: translate(1.2em, -11.75em) rotate(90deg);
	}
	40% {
		transform: translate(0.6em, -11.6em) rotate(90deg);
	}
	50% {
		transform: translate(1.2em, -11.45em) rotate(90deg);
	}
	60% {
		transform: translate(0.6em, -11.3em) rotate(90deg);
	}
	70% {
		transform: translate(1.2em, -11.15em) rotate(90deg);
	}
	80% {
		transform: translate(0.6em, -11em) rotate(90deg);
	}
	90% {
		opacity: 1;
		transform: translate(2em, -12.5em) rotate(100deg);
	}
	to {
		opacity: 0;
		transform: translate(2em, -12.5em) rotate(100deg);
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

cb-label {

display: flex;

margin: 10px;

font-size: 20px;

}

.cb-label span {

padding: 2px 10px;

line-height: 1.3;

display: inline-block;

}

.cb {

box-shadow: 0 0 0 0.125em rgba(0, 0, 0, 0.75) inset;

display: inline-block;

position: relative;

margin: 0 4px 0 0!important;

width: 1.5em;

height: 1.5em;

font-size: 22px;

vertical-align: middle;

-moz-appearance: none;

-webkit-appearance: none;

}

.cb:before, .cb:after {

content: "";

display: block;

position: absolute;

animation: none;

}

.cb:before {

animation: eraseA 0.5s steps(1) forwards;

background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABICAMAAABx5AOBAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACcUExURUdwTDMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMwzZNNQAAAAzdFJOUwD9CPf680HnDN0SLGUFwjrjnCK9s4agTAKAbEfXJ+weXBccyTV0z6eWj6TxeVdU0dKqUj+hA9AAAAIXSURBVBgZncAFduNAEATQEoItsszMGN66/9021GMpeXbU+mjGf8td0kkzNJKMHX7J52jA7tC4QM++8CqAmn1hiQut5MQyC1p9ViygFFusGEDHf2DFbAmVImLFrA0Vu8eKbgGdMcu8cQidqcOSaAqlzYwlhzaURheWbAtoxRavXgpozQNeRW1oJT1eLTKoTXjlPENtHtCw9lBLerzqjKAWWzTSFtSKgEbQhtroSMN9ht6TRaMPvXVEoxtC70Qjn0PPdyjcFfTCLY0TGnikcWhBr72g8HzoJT0aYzSwsijSEHrriOJhhwbONB7RQOZRpCFu2/iT82DQHyaosrsUXobbJjk/WUNUTWiMcdvQ47cOKpY5xaGF27oUUQtlHQp3ijv2Dr9ZQ5T4LkUH96xfKTq4CrcU+QZ3nSmiFow9jRj3+Ra/Wf8gioCia+O+8JXiCDGg8DL8pU8RLPFl6lKc8aedQxHjU7iliNb4U5JSpAk+7GnEqGFC4ezwrggoujZqmC8o+ng3oHB81DHqUcxCYOpSDFDPisIaItxSLOaoZxNQDLCnMUZdR4rIDyhmLdT1ROEGNFaobZ3zt9RGfUf+4k6h8MRf3kZQWAb8wdtBY9TjDyfoTFgVFFAZtR1WjKEUHlgWraHVYVkMtZglXRtqmUXDy6BXPNDoo4HWC0Uaooks4JegjWb8nB+8IZpq9xwyGqK58NGb7aDyH2UTzeCLYT1BAAAAAElFTkSuQmCC') 0 100%/1.2em 1.35em no-repeat;

bottom: 0.2em;

left: 0.3em;

width: 0;

height: 1.35em;

}

.cb:after {

animation: eraseB 0.5s linear forwards;

background: linear-gradient(rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 50%) 11.2em 0, linear-gradient(#c8646e, #c8646e) 11.2em 0, linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6) 0.1em, rgba(255, 255, 255, 0) 0.1em, rgba(255, 255, 255, 0) 0.2em, rgba(0, 0, 0, 0.2) 0.2em, rgba(0, 0, 0, 0.2) 0.3em, rgba(0, 0, 0, 0) 0.3em) 9.8em 0/0.3em 100%, repeating-linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6) 0.1em, rgba(255, 255, 255, 0) 0.1em, rgba(255, 255, 255, 0) 0.2em) 10.2em 0/0.5em 100%, linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6) 0.1em, rgba(255, 255, 255, 0) 0.1em, rgba(255, 255, 255, 0) 0.2em, rgba(0, 0, 0, 0.2) 0.2em, rgba(0, 0, 0, 0.2) 0.3em, rgba(0, 0, 0, 0) 0.3em) 10.8em 0/0.3em 100%, linear-gradient(rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.6) 35%, rgba(255, 255, 255, 0.6) 65%, rgba(255, 255, 255, 0) 65%) 9.7em 0, linear-gradient(#b4b4b4, #b4b4b4) 9.7em 0, linear-gradient(rgba(0, 0, 0, 0.1) 27%, rgba(0, 0, 0, 0) 27%, rgba(0, 0, 0, 0) 73%, rgba(0, 0, 0, 0.2) 73%) 2em 0, linear-gradient(#f0d000, #f0d000) 2em 0, linear-gradient(-14deg, #1e1e1e 18%, rgba(30, 30, 30, 0) 20%) 0 0/0.5em 0.5em, linear-gradient(14deg, rgba(30, 30, 30, 0) 80%, #1e1e1e 83%) 0 0.5em/0.5em 0.5em, linear-gradient(-14deg, #d2a078 48%, rgba(210, 160, 120, 0) 50%) 0 0/2em 0.5em, linear-gradient(14deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.1) 50%) 0 0.5em/2em 0.5em, linear-gradient(14deg, rgba(210, 160, 120, 0) 48%, #d2a078 50%) 0 0.5em/2em 0.5em;

background-repeat: no-repeat;

border-radius: 0 0.1em 0.1em 0;

opacity: 0;

visibility: hidden;

transform-origin: 0 0.25em;

width: 12em;

height: 1em;

}

.cb:checked {

background-color: transparent;

}

.cb:checked:before {

animation: drawA 0.5s linear forwards;

}

.cb:checked:after {

animation: drawB 0.5s linear;

}

.cb:focus {

outline: transparent;

}

.cb:focus + span {

color: rgba(0, 0, 0, 0.75);

outline: transparent;

}

.pristine:before, .pristine:after {

animation: none;

}

@keyframes drawA {

from, 5% {

width: 0;

height: 1.35em;

}

90%, to {

width: 1.2em;

height: 1.35em;

}

@keyframes drawB {

from {

opacity: 0;

transform: translate(0em, -0.5em) rotate(-50deg);

visibility: visible;

}

5% {

opacity: 1;

transform: translate(0em, 0.3em) rotate(-60deg);

}

17% {

transform: translate(0.25em, 0.8em) rotate(-65deg);

}

79% {

transform: translate(1.1em, -0.14em) rotate(-63deg);

}

90% {

opacity: 1;

transform: translate(1.2em, -0.15em) rotate(-63deg);

}

to {

opacity: 0;

transform: translate(1.25em, -1.7em) rotate(-63deg);

}

@keyframes eraseA {

from {

width: 1.2em;

height: 1.35em;

}

10% {

width: 1.2em;

height: 1.08em;

}

27% {

width: 1.2em;

height: 0.81em;

}

36% {

width: 1.2em;

height: 0.7em;

}

45% {

width: 1.2em;

height: 0.55em;

}

55% {

width: 1.2em;

height: 0.35em;

}

80%, to {

width: 1.2em;

height: 0;

}

@keyframes eraseB {

from {

opacity: 0;

transform: translate(0.6em, -12.2em) rotate(90deg);

visibility: visible;

}

10% {

opacity: 1;

transform: translate(1.2em, -12.05em) rotate(90deg);

}

20% {

transform: translate(0.6em, -11.9em) rotate(90deg);

}

30% {

transform: translate(1.2em, -11.75em) rotate(90deg);

}

40% {

transform: translate(0.6em, -11.6em) rotate(90deg);

}

50% {

transform: translate(1.2em, -11.45em) rotate(90deg);

}

60% {

transform: translate(0.6em, -11.3em) rotate(90deg);

}

70% {

transform: translate(1.2em, -11.15em) rotate(90deg);

}

80% {

transform: translate(0.6em, -11em) rotate(90deg);

}

90% {

opacity: 1;

transform: translate(2em, -12.5em) rotate(100deg);

}

to {

opacity: 0;

transform: translate(2em, -12.5em) rotate(100deg);

}

JS:

document.addEventListener("DOMContentLoaded",function() {
	var q = document.querySelectorAll(".cb");
	for (var i in q) {
		if (+i < q.length) {
			q[i].addEventListener("click",function(){
				let c = this.classList,
				p = "pristine";
				if (c.contains(p)) {
					c.remove(p);
				}
			});
		}
	}
});

document.addEventListener("DOMContentLoaded",function() {

var q = document.querySelectorAll(".cb");

for (var i in q) {

if (+i < q.length) {

q[i].addEventListener("click",function(){

let c = this.classList,

p = "pristine";

if (c.contains(p)) {

c.remove(p);

}

});

}

});

Найдено на codepen.io у пользователя Jon Kantner

Станислав: 11.02.2026 в 10:35

А можно ли подключить данный карандаш к форме wpforms к примеру? Конечно можно, что я спрашиваю. Вы всё умеете 🙂

Ответить
- Alexander: 11.02.2026 в 10:38
  
  Этот карандаш еще нужно будет подкрутить немного, старое решение (2019 года)
  На этой неделе постараюсь сделать, и по wpforms напишу заодно
  
  Ответить
- Alexander: 17.02.2026 в 18:54
  
  Запись и правда была древняя, я чуть подправил стили , а самое главное, тут не был представлен JS код, который стирал чекбокс (добавил его)
  Что касается [b]wpforms [/b], это уже на сайте нужно смотреть, как и куда его ставить.
  
  Ответить
Станислав: 11.02.2026 в 10:25

Прикольно) Но жаль действительно нет карандаша с ластиком стирающего галочку ( Замануха этакая)

Ответить
Лидия Александровна: 24.08.2023 в 01:45

Интересная штучка! Карандаш установила, галочки рисует. У вас в примере карандаш ещё и стирает галочку ластиком. А у меня почему-то больше не появляется. Так и должно быть? или это моя ошибка?

Ответить
- Alexander: 28.08.2023 в 14:05
  
  Если тут стирает, то так не должно быть 🙂
  Дайте ссылку на результат, посмотрю
  
  Ответить
  - Александр: 27.10.2023 в 14:53
    
    А как все-таки сделать чтобы еще и стирал?
    
    Ответить

Пример:

HTML:

CSS:

JS:

Смотрите также:

Добавить комментарий:

Комментарии: