We Keep Coding

How can I adjust the slider correctly?

I want to create a basic slider with javascript. There are images and when I click left and right buttons the images must be changed.
My code doesn't work. Where is my problem? No image changes even if we press the buttons. All my pictures are in jpg format.
(function() {
const pictures = [
"i1",
"i2",
"i3",
"i4",
"i5",
"i6",
"i7"
];
let buttons = document.querySelectorAll(".btn");
let imgDiv = document.querySelector(".img-container");
let counter = 0;
buttons.forEach(function(button) {
button.addEventListener("click", function(e) {
if (button.classList.contains('btn-left')) {
counter--
if (counter < 0) {
counter = pictures.length - 1;
console.log('nnhnhh')
}
imgDiv.style.background = `url('/new_assets/images/${pictures[counter]}.jpg')`
}
if (button.classList.contains('btn-right')) {
counter++
if (counter > pictures.length - 1) {
counter = 0;
}
imgDiv.style.background = `url('/new_assets/images/${pictures[counter]}.jpg')`
}
})
})
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #F3ff58;
}
.img-container {
width: 60%;
min-height: 60vh;
background: url("/new_assets/images/i1.jpg") center/cover fixed no-repeat;
border: 0.5rem solid #F3ff70;
border-radius: 0.5rem;
-webkit-border-radius: 0.5rem;
-moz-border-radius: 0.5rem;
-ms-border-radius: 0.5rem;
-o-border-radius: 0.5rem;
position: relative;
margin: 4rem auto;
box-shadow: 10px 10px 35px rgba(0, 0, 0, 0.06);
}
.btn-right {
position: absolute;
top: 50%;
right: 0;
background-color: #3B117E;
color: #fff;
transform: translate(50%, -50%);
-webkit-transform: translate(50%, -50%);
-moz-transform: translate(50%, -50%);
-ms-transform: translate(50%, -50%);
-o-transform: translate(50%, -50%);
border: 0.2rem solid #3CBFF8;
font-size: 1.5rem;
padding: 15px;
cursor: pointer;
}
.btn-left {
position: absolute;
top: 50%;
left: 0;
background-color: #3B117E;
color: #fff;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
border: 0.2rem solid #3CBFF8;
font-size: 1.5rem;
padding: 15px;
cursor: pointer;
}
<div class="img-container">
<a class="btn btn-left"><i class="fas fa-caret-left"></i></a>
<a class="btn btn-right"><i class="fas fa-caret-right"></i></a>
</div>
<script src="/new_assets/js/slider.js"></script>
<script src="https://kit.fontawesome.com/865149e15b.js" crossorigin="anonymous"></script>

Your logic itself is working fine. The problem is because you wrapped the logic in an anonymous function which you never invoke. To fix the problem, unwrap your code.
In addition, the logic can be made more succinct. You can use a single event handler for all .btn elements by adding a data attribute to them which controls what value is added to the counter, along with Math.min() and Math.max() to ensure the counter never goes out of bounds.
const pictures = ["i1", "i2", "i3", "i4", "i5", "i6", "i7"];
let buttons = document.querySelectorAll(".btn");
let imgDiv = document.querySelector(".img-container");
let counter = 0;
buttons.forEach(button => {
button.addEventListener("click", function(e) {
counter += parseInt(e.currentTarget.dataset.dir, 10);
counter = Math.max(Math.min(counter, pictures.length - 1), 0);
imgDiv.style.background = `url('/new_assets/images/${pictures[counter]}.jpg')`;
console.log(counter); // just for debugging
})
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #F3ff58;
}
.img-container {
width: 60%;
min-height: 60vh;
background: url("/new_assets/images/i1.jpg") center/cover fixed no-repeat;
border: 0.5rem solid #F3ff70;
border-radius: 0.5rem;
-webkit-border-radius: 0.5rem;
-moz-border-radius: 0.5rem;
-ms-border-radius: 0.5rem;
-o-border-radius: 0.5rem;
position: relative;
margin: 4rem auto;
box-shadow: 10px 10px 35px rgba(0, 0, 0, 0.06);
}
.btn-right {
position: absolute;
top: 50%;
right: 0;
background-color: #3B117E;
color: #fff;
transform: translate(50%, -50%);
-webkit-transform: translate(50%, -50%);
-moz-transform: translate(50%, -50%);
-ms-transform: translate(50%, -50%);
-o-transform: translate(50%, -50%);
border: 0.2rem solid #3CBFF8;
font-size: 1.5rem;
padding: 15px;
cursor: pointer;
}
.btn-left {
position: absolute;
top: 50%;
left: 0;
background-color: #3B117E;
color: #fff;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
border: 0.2rem solid #3CBFF8;
font-size: 1.5rem;
padding: 15px;
cursor: pointer;
}
<div class="img-container">
<a class="btn btn-left" data-dir="-1"><i class="fas fa-caret-left"></i></a>
<a class="btn btn-right" data-dir="1"><i class="fas fa-caret-right"></i></a>
</div>
<script src="/new_assets/js/slider.js"></script>
<script src="https://kit.fontawesome.com/865149e15b.js" crossorigin="anonymous"></script>

Put the cross on the top right page instead of the left

how can I put the cross on the top right side of my page? For now it appears on the left side.
.close {
vertical-align: middle;
border: none;
color: inherit;
border-radius: 50%;
background: transparent;
position: relative;
width: 32px;
height: 32px;
opacity: 0.6;
}
.close:focus,
.close:hover {
opacity: 1;
background: rgba(128, 128, 128, 0.5);
}
.close:active {
background: rgba(128, 128, 128, 0.9);
}
.close::before,
.close::after {
content: " ";
position: absolute;
top: 50%;
left: 50%;
height: 20px;
width: 4px;
background-color: currentColor;
}
.close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
My snipped code :https://jsfiddle.net/Lcqy3srg/3/

float
Use float: right on .close
MDN
/*Button to quit the form*/
.close {
vertical-align: middle;
border: none;
color: inherit;
border-radius: 50%;
background: transparent;
position: relative;
width: 20px;
height: 20px;
opacity: 0.6;
float: right;
}
.close:focus,
.close:hover {
opacity: 1;
background: rgba(128, 128, 128, 0.5);
}
.close:active {
background: rgba(128, 128, 128, 0.9);
}
/* tines of the X */
.close::before,
.close::after {
content: " ";
position: absolute;
top: 50%;
right: 0;
height: 20px;
width: 3px;
background-color: currentColor;
}
.close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
<div>
<button class="close" aria-label="Close"></button>
</div>
position
Using position: absolute and right: 0px will result in the same effect. It however requires more work, and might not work in many cases where you need to use a position other than absolute. (for example in this case, it gives a scroll bar because it was intended to use relative)
MDN
/*Button to quit the form*/
.close {
vertical-align: middle;
border: none;
color: inherit;
border-radius: 50%;
background: transparent;
position: absolute; /*Changed to absolute*/
width: 20px;
height: 20px;
opacity: 0.6;
right: 0px;
}
.close:focus,
.close:hover {
opacity: 1;
background: rgba(128, 128, 128, 0.5);
}
.close:active {
background: rgba(128, 128, 128, 0.9);
}
/* tines of the X */
.close::before,
.close::after {
content: " ";
position: absolute;
top: 50%;
right: 0;
height: 20px;
width: 3px;
background-color: currentColor;
}
.close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
<div>
<button class="close" aria-label="Close"></button>
</div>

you simply can add div "content" as parent of div "close"
.content {
position:absolute ;
top:0;
right:0;
}
Code screenshot:

Functionality to search bar

I am working on making a search bar that will filter my site for reports(urls) based on what is typed in. It currently works sort of. It will filter the items but you have the have the menus expanded for it to filter them.
I am looking for a way to either only have the results that match the search show(get rid of the headers for the dropdowns and only show links). OR to auto expand the dropdowns when a character is typed into the search bar
(closest I could get for a repeatable example.)
function searchSite() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('searchbar');
filter = input.value.toUpperCase();
ul = document.getElementById("Sidebar");
li = ul.getElementsByTagName('li');
closestClass = ul.closest('.parent');
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
.evolve .barTop {
-webkit-transform: rotate(-45deg) translate(-8px, 8px);
transform: rotate(-45deg) translate(-8px, 8px);
}
.evolve .barMid {
opacity: 0;
transition: 0.1s ease-in;
}
.evolve .barBot {
-webkit-transform: rotate(-45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
#main {
transition: margin-left 0.5s;
position: relative
}
.content {
max-height: 0px;
overflow: hidden;
background-color: transparent;
transition: max-height 1s ease-out;
box-shadow: inset 0px 0px 7px 7px rgba(0, 0, 0, 0.15);
}
.content .content-stuff {
background-color: #20396120;
border-left: outset #203961 13px;
padding: .5rem 1rem;
}
.content .content-stuff .subcontent {
max-height: 0px;
overflow: hidden;
background-color: transparent;
transition: max-height .75s ease-out;
}
.content .content-stuff .subcontent .subcontent-stuff {
border-bottom: solid grey 3px;
padding: .5rem;
}
.button:checked+.header+.content {
max-height: inherit;
}
.subbutton:checked+.subheader+.subcontent {
max-height: inherit;
}
.content .content-stuff .clickLink {
cursor: pointer;
}
hr {
border-style: solid;
color: #20396150;
border-height: .5px;
}
ul.Links {
list-style-type: none;
margin: 0;
padding: 0px;
}
li:not(:last-child) {
margin-bottom: 10px;
}
.fade-in-image {
position: absolute;
top: 13px;
left: 60px;
transition: FadeIn 1.0s ease-in;
}
.fade-in-image h2 {
margin-top: 1px;
margin-left: 45px;
color: #fca445;
white-space: nowrap;
font-family: 'Roboto', sans-serif;
font-weight: 400;
text-shadow: 3px 6px 6px rgba(0, 0, 0, 0.19), 0px -7.5px 15px rgba(255, 255, 255, 0.10);
;
}
#keyframes slide-right {
0% {
margin-left: -10%
}
;
100 {
margin-left: 80%
}
;
}
.fade-in-image img {
position: absolute;
animation: move 3s ease infinite;
}
#keyframes move {
0% {
margin-left: -10px;
}
5% {
margin-left: -9.25px;
}
10% {
margin-left: -10px;
}
15% {
margin-left: -10px;
}
75% {
margin-left: 3px;
}
80% {
margin-left: -11.5px;
}
85% {
margin-left: -5.5px;
}
87.25% {
margin-left: -11px;
}
90% {
margin-left: -7px;
}
95% {
margin-left: -10.5px;
}
97.5% {
margin-left: -9.25px;
}
100% {
margin-left: -10px;
}
}
}
/* popup code credit: codeconvey.com */
.sidebar .pop {
position: absolute;
width: 50%;
margin: auto;
padding: 20px;
height: 50%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#media (max-width: 640px) {
.pop {
position: relative;
width: 100%;
}
}
.sidebar .pop .modal {
z-index: 2;
opacity: 0;
visibility: hidden;
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: opacity 500ms ease-in-out;
transition: opacity 500ms ease-in-out;
}
.sidebar .pop .modal__inner {
-webkit-transform: translate(-50%, -50%) scale(0.75);
transform: translate(-50%, -50%) scale(0.75);
top: 50%;
left: 50%;
width: 50%;
background: white;
padding: 30px;
position: absolute;
color: black;
}
#media (max-width: 640px) {
.pop .modal__inner {
width: 100%;
}
}
.sidebar .btn-close {
color: #fff;
text-align: center;
}
.sidebar .pop label {
position: absolute;
top: 8px;
right: 55px;
padding: 1px 19px 1px 19px;
font-size: 45px;
cursor: pointer;
transition: 0.2s;
color: #fca445;
}
.sidebar .pop label.open:hover {
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
border-radius: 5px;
background-color: #33d62b60;
font-size: 45px;
}
.sidebar .pop input {
display: none;
}
.sidebar .pop input:checked+.modal {
opacity: 1;
visibility: visible;
}
.sidebar .pop input:checked+.modal .modal__inner {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.sidebar .pop input:checked+.modal .modal__inner p {
font-size: 1.25rem;
line-height: 125%;
}
.sidebar .pop input:checked+.modal label {
position: absolute;
top: 0;
right: 0;
padding: 4px 8px 4px 8px;
font-size: 20px;
cursor: pointer;
transition: 0.2s;
color: #000;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.sidebar .pop input:checked+.modal label:hover {
background-color: #ff141860;
}
<div id="Sidebar" class="sidebar">
<p style="text-align:center;"><input id="searchbar" onkeyup="searchSite()" type="text" name="search" placeholder="Search" title="Report or Category Name" style="width: 300px;" /></p>
<input id="OpsButton" class="button" type="checkbox">
<label for="OpsButton" class="header">Operations</label>
<div class="content">
<div class="content-stuff">
<input id="Button1" class="subbutton" type="checkbox">
<label for="Button1" class="subheader">Header1</label>
<div class="subcontent">
<div class="subcontent-stuff">
<ul class="Links">
<li><a title="Region" href="X" target="bodyinfo">Region</a></li>
<li><a title="range" href="X" target="bodyinfo">range</a></li>
</ul>
</div>
</div>
<input id="FinancialButton" class="subbutton" type="checkbox">
<label for="FinancialButton" class="subheader">Financials</label>
<div class="subcontent">
<div class="subcontent-stuff">
<ul class="Links">
<li><a title="Region2" href="X" target="bodyinfo">Region2</a></li>
<li><a title="range2" href="X" target="bodyinfo">range2</a></li>
</ul>
</div>
</div>
<p>
</p>
<ul class="Links">
<li>Turnover Report</li>
</ul>
<p></p>
</div>
</div>
</div>

Okay figured it out by creating a function that will click all of the header buttons to expand the menus. and adding this function call to my main function. So if the menu is already expanded, it won't close it- otherwise it'll open it. Rinse and repeat for all buttons in your webpage.
var something = (function() {
var executed = false;
return function() {
if (!executed) {
executed = true;
var OpsButton = document.getElementById("OpsButton");
var next = document.getElementById("w/e");
if (!OpsButton.checked) {
OpsButton.click(); }
if (!next.checked) {
next.click(); }
}
};
})();

Radio button or an image?

I am working on a react application.
I have this requirement to show a switch similar to the one used in an iPhone setting.
I am able to use two images based on the on/off state and display it.
Is it better to create a component using input type=checkbox ?

You don't need an image for this:
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<!-- Rounded switch -->
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
I took it from here: w3schools
[edit] A one that looks more similar to the iphone switch
.form-switch {
display: inline-block;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.form-switch i {
position: relative;
display: inline-block;
margin-right: .5rem;
width: 46px;
height: 26px;
background-color: #e6e6e6;
border-radius: 23px;
vertical-align: text-bottom;
transition: all 0.3s linear;
}
.form-switch i::before {
content: "";
position: absolute;
left: 0;
width: 42px;
height: 22px;
background-color: #fff;
border-radius: 11px;
transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
transition: all 0.25s linear;
}
.form-switch i::after {
content: "";
position: absolute;
left: 0;
width: 22px;
height: 22px;
background-color: #fff;
border-radius: 11px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
transform: translate3d(2px, 2px, 0);
transition: all 0.2s ease-in-out;
}
.form-switch:active i::after {
width: 28px;
transform: translate3d(2px, 2px, 0);
}
.form-switch:active input:checked + i::after { transform: translate3d(16px, 2px, 0); }
.form-switch input { display: none; }
.form-switch input:checked + i { background-color: #4BD763; }
.form-switch input:checked + i::before { transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0); }
.form-switch input:checked + i::after { transform: translate3d(22px, 2px, 0); }
<label class="form-switch">
<input type="checkbox">
<i></i>
Select Me
</label>
source: cssscript

Yes AFAIK, that's how most of the ui library does it. They do it by using label html tag and hiding checkbox and using css selectors to know when to display on/off state. Checkboxes are a very powerfull concepts in HTML. You can check this article from css-tricks which where the checkboxes can be used.

Customized HTML checkbox label

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.
.
When the user unchecks the checkbox it shows the value of its label:
.
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:
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>

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>

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>