Question : custom checkbox
Answered by : segun-adebanjo
.checkbox-label { display: block; position: relative; margin: auto; cursor: pointer; font-size: 22px; line-height: 24px; height: 24px; width: 24px; clear: both;
}
.checkbox-label input { position: absolute; opacity: 0; cursor: pointer;
}
.checkbox-label .checkbox-custom { position: absolute; top: 0px; left: 0px; height: 24px; width: 24px; background-color: transparent; border-radius: 5px; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; border: 2px solid #000;
}
.checkbox-label input:checked ~ .checkbox-custom { background-color: #FFEA00; border-radius: 5px; -webkit-transform: rotate(0deg) scale(1); -ms-transform: rotate(0deg) scale(1); transform: rotate(0deg) scale(1); opacity:1; border: 2px solid #000;
}
.checkbox-label .checkbox-custom::after { position: absolute; content: ""; left: 12px; top: 12px; height: 0px; width: 0px; border-radius: 5px; border: solid #000; border-width: 0 3px 3px 0; -webkit-transform: rotate(0deg) scale(0); -ms-transform: rotate(0deg) scale(0); transform: rotate(0deg) scale(0); opacity:1; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out;
}
.checkbox-label input:checked ~ .checkbox-custom::after { -webkit-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); opacity:1; left: 8px; top: 3px; width: 6px; height: 12px; border: solid #000000; border-width: 0 2px 2px 0; background-color: transparent; border-radius: 0;
}Source : https://stackoverflow.com/questions/24322599/why-cannot-change-checkbox-color-whatever-i-do | Last Update : Sat, 26 Jun 21
Question : how to create custom checkbox
Answered by : splendid-sable-j03bhfia1t17
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8" /> <title>Simple check box</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta https-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="style.css" /> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet"> </head> <body> <div class="lang-selector"> <div class="flex-field"> <input type="radio" name="lang" value="eng" id="english"> <label for="english"></label> <span class="label">English</span> </div> <div class="flex-field"> <input type="radio" name="lang" value="noneng" id="nonenglish"> <label for="nonenglish"></label> <span class="label">Non English</span> </div> </div>
<style>
* { padding: 0; margin: 0; font-family: 'IBM Plex Sans', sans-serif;
}
body { display: flex; align-items: center; justify-content: center; height: 100vh; background: #f1f2f3;
}
input[type="radio"] { display: none;
}
input[type="radio"] + label { display: inline-block; width: 20px; height: 20px; border: 1px solid #4b00ff; position: relative; cursor: pointer;
}
input[type="radio"] + label:after { content: ""; position: absolute; width: 3px; height: 12px; left: 0; right: 0; top: 0; margin: auto; transform: rotate(45deg); border: 2px solid #f1f2f3; border-top-color: transparent; border-left-color: transparent;
}
input[type="radio"]:checked + label { background: #4b00ff;
}
.lang-selector,
.flex-field { display: flex; align-items: center; grid-gap: 10px;
} </style> </body>
</html>Source : https://blog.stackfindover.com/how-to-create-custom-checkbox/ | Last Update : Fri, 06 May 22
Question : customize checkbox
Answered by : marwen-labidi
appearance:none
outline:2px slid red;
outline-offset:2px // space between ouline and bg color
// if is checked input:checked {backgound-color :red}
border-radius:50%;Source : | Last Update : Tue, 08 Nov 22