100
const cek = document.getElementById("fxd"),
bbx = document.getElementById("box");
cek.addEventListener("change", () => {
bbx.classList.toggle("fixed");
});
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
background-color: #16202c;
}
.warpper {
width: 500px;
text-align: center;
}
.box {
display: block;
width: 100%;
height: 250px;
background-color: #223444;
margin: 0 auto;
transition: .6s easier;
}
.fixed {
max-width: 350px;
transition: .6s easier;
}
.chkb {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
.check {
position: relative;
width: 40px;
height: 15px;
background-color: #223444;
outline: none;
-webkit-appearance: none;
border-radius: 20px;
cursor: pointer;
box-shadow: inset 0 0 5px rgba(0, 0, 0, .9);
//*border: 1px solid #111923;*//
}
.check:checked {
background-color: #1e69de;
}
.check:before {
background-color: #0F121E;
content: "";
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
left: 0;
top: 0;
transform: scale(1.4);
transition: .3s;
box-shadow: 0 0 5px rgba(0, 0, 0, .6);
}
.check:checked:before {
left: 22px;
background-color: #1e69de;
}
.head {
border: 1px solid #223444;
padding: 10px 7px;
display: flex;
justify-content: space-between;
margin-bottom: 5px;
color: #1e69de;
}
<div class="chkb">
<div class="warpper">
<div class="head">
<div class="">Change Width</div>
<input type="checkbox" id="fxd" class="check" name="theme" >
<!--<button type="button" class="btn">Change</button>-->
</div>
<div id="box" class="box"></div>
</div>
</div>