Question

我有一个来自Codepen的自定义复选框。

页面加载后，该复选框几乎被选中，并且该框中没有文本。

。

当用户取消选中复选框时，它会显示其标签的值：

。

我想做的是显示一条自定义消息，该消息将显示在“单击我确认联系人”之类的复选框中。当用户取消选中该复选框时，它可以很好地显示联系的对象。

我已经尝试过使用jQuery，但无法正常工作。谁能给我一个可行的解决方案？我期望这样的事情：

谢谢。

.inputGroup {
  background-color: #fff;
  border-radius: 25px;
}

.inputGroup label {
  padding: 12px 30px;
  width: 100%;
  display: block;
  text-align: left;
  color: #3C454C;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: color 200ms ease-in;
  overflow: hidden;
  border: 2px solid green;
  border-radius: 25px;
  height: 40px;
}

.inputGroup label:before {
  width: 32px;
  height: 32px;
  content: '';
  border: 2px solid #D1D7DC;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
  background-repeat: no-repeat;
  background-position: 2px 3px;
  border-radius: 50%;
  z-index: 2;
  position: absolute;
  right: 30px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: pointer;
  transition: all 200ms ease-in;
  background-color: green;
}

.inputGroup input:checked~label {
  color: #fff;
  height: 40px;
  border-radius: 25px;
  border: 2px solid #5562eb;
}

.inputGroup input:checked~label:before {
  -webkit-transform: translate(-50%, -50%) scale3d(56, 56, 1);
  transform: translate(-50%, -50%) scale3d(56, 56, 1);
  opacity: 1;
  background-color: white;
}

.inputGroup input {
  width: 32px;
  height: 32px;
  order: 1;
  z-index: 2;
  position: absolute;
  right: 30px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: pointer;
  visibility: hidden;
  border-radius: 25px;
}

<div class="inputGroup">
  <input id="radio1" name="radioContacted" value="contacted" type="checkbox" checked />
  <label for="radio1" id="radio01">Contacted</label>
</div>

Answer 1

我真的不明白为什么要一直选中您的复选框（正如我在HTML中看到的），但是这是一种更改标签上文本的解决方案。使用:after伪元素。

如果这不是您想要的。请在评论中让我知道。

.inputGroup {
  background-color: #fff;
  border-radius: 25px;
  position:relative;
}

.inputGroup label {
  padding: 12px 30px;
  width: 100%;
  display: block;
  text-align: left;
  color: #3C454C;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: color 200ms ease-in;
  overflow: hidden;
  border: 2px solid green;
  border-radius: 25px;
  height: 40px;
  box-sizing:border-box;
}

.inputGroup label:before {
  width: 32px;
  height: 32px;
  content: '';
  border: 2px solid #D1D7DC;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
  background-repeat: no-repeat;
  background-position: 2px 3px;
  border-radius: 50%;
  z-index: 2;
  position: absolute;
  right: 30px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: pointer;
  transition: all 200ms ease-in;
  background-color: green;
}
.inputGroup label:after {
   content:"Contacted";
   position:absolute;
   top:50%;
   transform:translateY(-50%);
   z-index:2;
   left: 15px;
 }
 
 .inputGroup input:checked~label:after {

  content:"Click me to confirm";
 }

.inputGroup input:checked~label {
  height: 40px;
  border-radius: 25px;
  border: 2px solid #5562eb;
}

.inputGroup input:checked~label:before {
  -webkit-transform: translate(-50%, -50%) scale3d(56, 56, 1);
  transform: translate(-50%, -50%) scale3d(56, 56, 1);
  opacity: 1;
  background-color: white;
}

.inputGroup input {
  width: 32px;
  height: 32px;
  order: 1;
  z-index: 2;
  position: absolute;
  right: 30px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: pointer;
  visibility: hidden;
  border-radius: 25px;
}

<div class="inputGroup">
  <input id="radio1" name="radioContacted" value="contacted" type="checkbox" checked />
  <label for="radio1" id="radio01"></label>
</div>

Answer 2

这是一个使用JavaScript交换标签值的解决方案。我遇到的一个问题是，您在标签上有白色的文本颜色，必须将其删除才能显示标签。

input = document.getElementById('radio1');
label = document.getElementById('radio01');

function handleClick() {
  (input.checked ? label.innerText = "Click me to confirm the contact" : label.innerText = "Contacted");
}

input.addEventListener('click', handleClick);

.inputGroup {
  background-color: #fff;
  border-radius: 25px;
}

#para {
  z-index: 999;
}

.inputGroup label {
  padding: 12px 30px;
  max-width: 100%;
  display: block;
  text-align: left;
  color: #3C454C;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: color 200ms ease-in;
  overflow: hidden;
  border: 2px solid green;
  border-radius: 25px;
  height: 40px;
}

.inputGroup label:before {
  width: 32px;
  height: 32px;
  content: '';
  border: 2px solid #D1D7DC;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
  background-repeat: no-repeat;
  background-position: 2px 3px;
  border-radius: 50%;
  z-index: 2;
  position: absolute;
  right: 30px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: pointer;
  transition: all 200ms ease-in;
  background-color: green;
}

.inputGroup input:checked~label {
  height: 40px;
  border-radius: 25px;
  border: 2px solid #5562eb;
}

.inputGroup input:checked~label:before {
  -webkit-transform: translate(-50%, -50%) scale3d(56, 56, 1);
  transform: translate(-50%, -50%) scale3d(56, 56, 1);
  opacity: 0;
  background-color: white;
}

.inputGroup input {
  width: 32px;
  height: 32px;
  order: 1;
  z-index: 2;
  position: absolute;
  right: 30px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: pointer;
  visibility: hidden;
  border-radius: 25px;
}

<div class="inputGroup">
  <input id="radio1" name="radioContacted" value="contacted" type="checkbox" checked />
  <label for="radio1" id="radio01">Click me to confirm the contact</label>
</div>

自定义HTML复选框标签

2 个答案: