Breaking News: Grepper is joining You.com. Read the official announcement!

customize checkbox

Add Answer

Marwen Labidi answered on June 19, 2021 Popularity 9/10 Helpfulness 1/10

answer customize checkbox

related custom checkbox

related how to create custom checkbox

customize checkbox

Comment

-1

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%;

Popularity 9/10 Helpfulness 1/10 Language css

Source: Grepper

Tags: checkbox css

Link to this answer
Share Copy Link

Contributed on Nov 01 2022

Marwen Labidi

0 Answers Avg Quality 2/10

Closely Related Answers

custom checkbox

Comment

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

Popularity 10/10 Helpfulness 2/10 Language css

Source: stackoverflow.com

Tags: checkbox checkbo

Link to this answer
Share Copy Link

Contributed on Jun 19 2021

Gentle Grivet

0 Answers Avg Quality 2/10

how to create custom checkbox

Comment

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

Popularity 10/10 Helpfulness 2/10 Language html

Source: blog.stackfindover.com

Tags: checkbox checkbo

Link to this answer
Share Copy Link

Contributed on Apr 29 2022

Splendid Sable

0 Answers Avg Quality 2/10

customize checkbox

Contents

More Related Answers

customize checkbox

Closely Related Answers

custom checkbox

how to create custom checkbox

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.