Customized HTML checkbox label

user_11027506 0
Viewed 150

I have a customized check box which is grabbed from Codepen.

When the page loads the checkbox is almost checked and no text is available in the box.

Click here to see checkedcheckbox.

When the user unchecks the checkbox it shows the value of its label:

Click here to see unchecked checkbox.

What I want to do is to show a custom message to be displayed in the checkbox like 'Click me to confirm the contact'. When the user unchecks the checkbox it works fine showing that contacted.

I have tried with jQuery and it is not working. Could anyone give me a working solution? I expect something like this:

enter image description here

Thanks.

.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>

css html jquery javascript
2 Answers

I don't really understand why you want your checkbox to be always checked ( as i see in your HTML ) but here's a solution to change the text on the label. Using :after pseudo-element.

If this is not what you are looking for. Please let me know in the comments.

.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>

user_64411240

Here's a solution using JavaScript to swap out the label values. One of the issues I ran into with this was that you had a text color of white on the label which I've had to remove to display the label.

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>

user_112368160
Related