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

how to create custom checkbox

Add Answer

Splendid Sable answered on June 19, 2021 Popularity 10/10 Helpfulness 2/10

answer how to create custom checkbox

related custom checkbox

related Unique "key" prop

related customize checkbox

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 html

Link to this answer
Share Copy Link

Contributed on Apr 29 2022

Splendid Sable

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

Unique "key" prop

Comment

Unique "key" prop
Ex1:
function MyComponent() {
  const items = ["Apple", "Banana", "Orange"];
  return (
    <ul>
      {items.map(item => (
        <li>{item}</li>  // Cảnh báo: Không có 'key' prop
      ))}
    </ul>
  );
}

function MyComponent() {
  const items = ["Apple", "Banana", "Orange"];
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>  // Thêm 'key' prop
      ))}
    </ul>
  );
}

Ex2:
function MyComponent() {
  const items = ["Apple", "Banana", "Orange"];
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>  // Thêm 'key' prop
      ))}
    </ul>
  );
}

function MyComponent() {
  const items = ["Apple", "Banana", "Orange"];
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>  // Thêm 'key' prop
      ))}
    </ul>
  );
}

Popularity 2/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript prop unique

Link to this answer
Share Copy Link

Contributed on Dec 05 2024

Puzzled Penguin

0 Answers Avg Quality 2/10

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 checkbo

Link to this answer
Share Copy Link

Contributed on Nov 01 2022

Marwen Labidi

0 Answers Avg Quality 2/10

how to create custom checkbox

Contents

More Related Answers

how to create custom checkbox

Closely Related Answers

custom checkbox

Unique "key" prop

customize checkbox

Grepper

Documentation

Social

Legal

Contact

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