时间戳

首页 > 解决方案 > 复选框 CSS 的单独样式

html - 复选框 CSS 的单独样式

问题描述

独立风格

我有这个问题，在应用它们在找到的所有复选框中应用的样式时，我只认为每个复选框的样式都是独立应用的，只能选择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>

如示例所示，样式为每个人都显示，但我只希望每个人都有其内容。我期待答案，并感谢您的关注。

标签： htmlcss

解决方案

您正在做的是将 HTML 属性定位<input>为type="checkbox". 因此，您在页面上拥有的任何人都将成为目标。input[type="checkbox"]但是，您可以使用 ID覆盖。简单地说，要在 HTML 页面上定义一个 ID。在每个 HTML 标签上，<input>甚至您可以添加一个类似的 ID ，其他标签<p>也是如此。要在 CSS 中编写它，您可以在标签内编写类似这样的内容 这些样式将覆盖您拥有的内容。<textarea><input id="thisIsWhateverYouWant" type="checkbox"><style>#thisIsWhateverYouWant {height: 100%; width: 100%}

这是对什么覆盖什么的参考。看一下这个

推荐阅读