отдельные стили для флажка CSS

Question

независимые стили

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

  <style media="screen">
  /* Hide the checkbox */
  form p {
  	position: relative; /* allows to position the checkbox */
  }

  [type="checkbox"]:not(:checked),
  [type="checkbox"]:checked {
  	/* Hide the checkbox without
  	   making it hidden for the
  	   screen readers */
  	position: absolute;
  	left: 0;
  	opacity: 0.01;
  }

  /* Preparing the label */
  [type="checkbox"]:not(:checked) + label,
  [type="checkbox"]:checked + label {
  	position: relative; /* allows to position the custom boxes */
  	padding-left: 2.3em; /* space for upcoming boxes */
  	font-size: 1.05em;
  	line-height: 1.7;
  	cursor: pointer;
  }
  /* Box aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 1.4em;
	height: 1.4em;
	border: 1px solid #aaa;
	background: #FFF;
	border-radius: .2em;
	box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 rgba(203, 34, 237, .2);
	transition: all .275s;
}

/* Check aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
	content: 'X';
	position: absolute;
	top: .38em;
	left: .18em;
	font-size: 1.6em;
	color: #CB22ED;
	line-height: 0;
	transition: all .2s; /* Little transition */
}

/* Unchecked aspect */
[type="checkbox"]:not(:checked) + label:after {
	opacity: 0;
	transform: scale(0) rotate(45deg);
}

/* Checked aspect */
[type="checkbox"]:checked + label:after {
	opacity: 1;
	transform: scale(1) rotate(0);
}
  </style>

<p>
	<input type="checkbox" class="check" id="test1" />
	<label for="test1" aria-describedby="label">YES</label>
</p>
<p>
	<input type="checkbox" id="test2" />
	<label for="test2" aria-describedby="label">NO</label>
</p>

Как показано в примере, стили отображаются для всех, но я только с sh хочу, чтобы у каждого был свой контент. Жду ответов и благодарю за внимание.

Answer 1

То, что вы делаете, нацелено на атрибут HTML <input> с типом type="checkbox". Поэтому любой из тех, кто у вас есть на этой странице, будет таргетирован. Однако вы можете переопределить input[type="checkbox"] с помощью идентификатора. Чтобы определить идентификатор, просто поместите его на странице HTML. На каждый тег HTML, например <input> или <p> или даже <textarea>, можно добавить идентификатор, подобный этому <input id="thisIsWhateverYouWant" type="checkbox">, то же самое относится и к другим. Чтобы написать это в CSS, внутри тегов <style> вы можете написать что-то вроде этого #thisIsWhateverYouWant {height: 100%; width: 100%} Эти стили переопределят то, что у вас есть.

Вот ссылка на то, что переопределяет то, что. Проверьте это