html - 多个颜色选择器不工作

标签 html css forms colors picker

我有三个颜色选择器，但我已经更改了类，但是 2nd和 3rd选择器仅更改 1st 上的选择，我想如果是JavaScript更改选择会更容易。因此复制脚本并更改 ID三个拾取器中的每一个的 s。不过我是从codepen拿来的它只是一个颜色选择器，但当我添加更多甚至更改类时，它仍然只选择 1st .

有人可以帮我一下吗？

这是我的代码:

	
<style class="cp-pen-styles">* {
  box-sizing: border-box;
}

.colorPicker {
  margin-top: 1em;
  font-size: 0.875em;
  text-align: center;
  display: inline-table;
  width: 100%;
  max-width: 40em;
  background: #fff;
  padding: 2px;
  border-radius: 0.35em;
  box-shadow: 0 0.5em 1.5em rgba(0,0,0,0.15);
}
.colorPicker label {
  -webkit-tap-highlight-color: rgba(255,255,255,0.5);
  -webkit-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
  display: table-cell;
  cursor: pointer;
  vertical-align: middle;
  padding: 0.5em 1em;
  text-transform: capitalize;
  letter-spacing: -0.5em;
  color: transparent;
  opacity: 0.35;
  width: 1%;
  background-image: -webkit-linear-gradient(rgba(255,255,255,0.1), rgba(0,0,0,0.1));
  background-image: linear-gradient(rgba(255,255,255,0.1), rgba(0,0,0,0.1));
}
.colorPicker label.red {
  background-color: #ff3e05;
  -webkit-tap-highlight-color: #ff3e05;
}
.colorPicker label.orange {
  background-color: #ff8d05;
  -webkit-tap-highlight-color: #ff8d05;
}
.colorPicker label.yellow {
  background-color: #ecca05;
  -webkit-tap-highlight-color: #ecca05;
}
.colorPicker label.green {
  background-color: #40af04;
  -webkit-tap-highlight-color: #40af04;
}
.colorPicker label.blue {
  background-color: #057fff;
  -webkit-tap-highlight-color: #057fff;
}
.colorPicker label.indigo {
  background-color: #7500ca;
  -webkit-tap-highlight-color: #7500ca;
}
.colorPicker label.violet {
  background-color: #cc6fcc;
  -webkit-tap-highlight-color: #cc6fcc;
}
.colorPicker label:first-of-type {
  border-radius: 0.25em 0 0 0.25em;
}
.colorPicker label:last-of-type {
  border-radius: 0 0.25em 0.25em 0;
}
.colorPicker label:hover {
  opacity: 1;
  color: #fff;
  letter-spacing: normal;
}
.colorPicker input {
  display: none;
}
.colorPicker input:checked + label {
  width: 90%;
  opacity: 1;
  color: #fff;
  letter-spacing: normal;
}

</style>
	
<style class="cp-pen-styles">
.colorPicker2 {
  margin-top: 1em;
  font-size: 0.875em;
  text-align: center;
  display: inline-table;
  width: 100%;
  max-width: 40em;
  background: #fff;
  padding: 2px;
  border-radius: 0.35em;
  box-shadow: 0 0.5em 1.5em rgba(0,0,0,0.15);
}
.colorPicker2 label {
  -webkit-tap-highlight-color: rgba(255,255,255,0.5);
  -webkit-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
  display: table-cell;
  cursor: pointer;
  vertical-align: middle;
  padding: 0.5em 1em;
  text-transform: capitalize;
  letter-spacing: -0.5em;
  color: transparent;
  opacity: 0.35;
  width: 1%;
  background-image: -webkit-linear-gradient(rgba(255,255,255,0.1), rgba(0,0,0,0.1));
  background-image: linear-gradient(rgba(255,255,255,0.1), rgba(0,0,0,0.1));
}
.colorPicker2 label.red2 {
  background-color: #ff3e05;
  -webkit-tap-highlight-color: #ff3e05;
}
.colorPicker2 label.orange2 {
  background-color: #ff8d05;
  -webkit-tap-highlight-color: #ff8d05;
}
.colorPicker2 label.yellow2 {
  background-color: #ecca05;
  -webkit-tap-highlight-color: #ecca05;
}
.colorPicker2 label.green2 {
  background-color: #40af04;
  -webkit-tap-highlight-color: #40af04;
}
.colorPicker2 label.blue2 {
  background-color: #057fff;
  -webkit-tap-highlight-color: #057fff;
}
.colorPicker2 label.indigo2 {
  background-color: #7500ca;
  -webkit-tap-highlight-color: #7500ca;
}
.colorPicker2 label.violet2 {
  background-color: #cc6fcc;
  -webkit-tap-highlight-color: #cc6fcc;
}
.colorPicker2 label:first-of-type {
  border-radius: 0.25em 0 0 0.25em;
}
.colorPicker2 label:last-of-type {
  border-radius: 0 0.25em 0.25em 0;
}
.colorPicker2 label:hover {
  opacity: 1;
  color: #fff;
  letter-spacing: normal;
}
.colorPicker2 input {
  display: none;
}
.colorPicker2 input:checked + label {
  width: 90%;
  opacity: 1;
  color: #fff;
  letter-spacing: normal;
}

</style>
<div class="CustomStylesCont" style="overflow:scroll;position:relative;width:50%;height:30%;">
<h6>Navbar</h6>
<form id="upload" method="post"  class="form-horizontal"action="***" enctype="multipart/form-data">
	<fieldset>
<div class="colorPicker" >
	
  <input type="radio" name="hat-color" value="rgba(255, 62, 5, 0.5)" id="hat-color-red" class="red"/>
  <label for="hat-color-red" class="red">red</label>
  <input type="radio" name="hat-color" value="rgba(255, 141, 5, 0.5)" id="hat-color-orange" class="orange"/>
  <label for="hat-color-orange" class="orange">orange</label>
  <input type="radio" name="hat-color" value="rgba(236, 202, 5, 0.5)" id="hat-color-yellow" class="yellow"/>
  <label for="hat-color-yellow" class="yellow">yellow</label>
  <input type="radio" name="hat-color" value="rgba(64, 175, 4, 0.5)" id="hat-color-green" class="green"/>
  <label for="hat-color-green" class="green">green</label>
  <input type="radio" name="hat-color" value="rgba(5, 127, 255, 0.5)" id="hat-color-blue" class="blue"/>
  <label for="hat-color-blue" class="blue">blue</label>
  <input type="radio" name="hat-color" value="rgba(117, 0, 202, 0.5)" id="hat-color-indigo" class="indigo"/>
  <label for="hat-color-indigo" class="indigo">indigo</label>
  <input type="radio" name="hat-color" value="rgba(204, 111, 204, 0.5)" id="hat-color-violet" class="violet"/>
  <label for="hat-color-violet" class="violet">violet</label>
</div>
<h6>Feed</h6>
<div class="colorPicker2" >
	
  <input type="radio" name="hat-color2" value="rgba(255, 62, 5, 0.5)" id="hat-color-red" class="red2"/>
  <label for="hat-color-red" class="red2">red</label>
  <input type="radio" name="hat-color2" value="rgba(255, 141, 5, 0.5)" id="hat-color-orange" class="orange2"/>
  <label for="hat-color-orange" class="orange2">orange</label>
  <input type="radio" name="hat-color2" value="rgba(236, 202, 5, 0.5)" id="hat-color-yellow" class="yellow2"/>
  <label for="hat-color-yellow" class="yellow2">yellow</label>
  <input type="radio" name="hat-color2" value="rgba(64, 175, 4, 0.5)" id="hat-color-green" class="green2"/>
  <label for="hat-color-green" class="green2">green</label>
  <input type="radio" name="hat-color2" value="rgba(5, 127, 255, 0.5)" id="hat-color-blue" class="blue2"/>
  <label for="hat-color-blue" class="blue2">blue</label>
  <input type="radio" name="hat-color2" value="rgba(117, 0, 202, 0.5)" id="hat-color-indigo" class="indigo2"/>
  <label for="hat-color-indigo" class="indigo2">indigo</label>
  <input type="radio" name="hat-color2" value="rgba(204, 111, 204, 0.5)" id="hat-color-violet" class="violet2"/>
  <label for="hat-color-violet" class="violet2">violet</label>
</div>
<h6>Feed Content</h6>
<div class="colorPicker" >
	
  <input type="radio" name="hat-color3" value="rgba(255, 62, 5, 0.5)" id="hat-color-red" class="red"/>
  <label for="hat-color-red" class="red">red</label>
  <input type="radio" name="hat-color3" value="rgba(255, 141, 5, 0.5)" id="hat-color-orange" class="orange"/>
  <label for="hat-color-orange" class="orange">orange</label>
  <input type="radio" name="hat-color3" value="rgba(236, 202, 5, 0.5)" id="hat-color-yellow" class="yellow"/>
  <label for="hat-color-yellow" class="yellow">yellow</label>
  <input type="radio" name="hat-color3" value="rgba(64, 175, 4, 0.5)" id="hat-color-green" class="green"/>
  <label for="hat-color-green" class="green">green</label>
  <input type="radio" name="hat-color3" value="rgba(5, 127, 255, 0.5)" id="hat-color-blue" class="blue"/>
  <label for="hat-color-blue" class="blue">blue</label>
  <input type="radio" name="hat-color3" value="rgba(117, 0, 202, 0.5)" id="hat-color-indigo" class="indigo"/>
  <label for="hat-color-indigo" class="indigo">indigo</label>
  <input type="radio" name="hat-color3" value="rgba(204, 111, 204, 0.5)" id="hat-color-violet" class="violet"/>
  <label for="hat-color-violet" class="violet">violet</label>
</div>
					  			<input type="text" id="usr_id" name="usr_id" class="MsgInputHidden" value="<?= $_SESSION['user']['id'] ?>" />

</div>

最佳答案

您的 label 是错误的(for 属性)- 它们必须匹配它们所定位的 id。因此，您所有的 id 都必须是唯一的，但事实并非如此，因为您的后两个选择器与第一个选择器具有相同的 id。在每个元素上，更改 label[for] 和 id 以反射(reflect)它们是唯一元素。如果您可以在 PHP 元素中使用循环自动执行此操作，那就更好了!

这些类不会影响这一点 - 这一切都在 id 和 label 之间的 native 浏览器行为中。

关于html - 多个颜色选择器不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32402303/

上一篇：css - p标签前后的背景图片

下一篇：html - 带有两个图像的 CSS Shape-outside

相关文章：

php - 当图像名称中包含连字符时，为什么我的背景图像在 CSS 中不起作用？

css 背景图片不起作用

forms - Angular Material 表单验证错误

javascript - 尝试使用 Type= 和 OnClick= 使两个功能与一个按钮相关联

javascript - AngularJS 获取和设置元素高度

javascript - Jquery:设置基于 <select> 属性检查的 <option>

html - 即使在浏览器刷新后也链接到外部样式表

javascript - 将文本输入放在图像上

javascript - 在reactjs中创建并排div和响应式顶部底部div

html - 如何使背景图像以随机位置重复

©2024 IT工具网  联系我们