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

Custom Checkbox in Pure CSS

oussama ayadi answered on June 19, 2021 Popularity 10/10 Helpfulness 2/10

answer Custom Checkbox in Pure CSS

related custom checkbox

Custom Checkbox in Pure CSS

Comment

<div class="form-check form-check-inline">
	<input
		class="form-check-input input-check-box-yellow-black"
        type="checkbox"
        id="inlineCheckbox1"
        value="option1"
    />
    <label class="form-check-label" for="inlineCheckbox1">TITLE</label>
</div>
                
                
.input-check-box-yellow-black {
  opacity: 0;
}
.input-check-box-yellow-black + label {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  display: inline-block;
  /* line-height: 25px; */
}
.input-check-box-yellow-black + label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  background-color: #ebebeb;
  border-radius: 3px;
}
.input-check-box-yellow-black:checked + label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  background-color: #ffd966;
  border-radius: 3px;
}
.input-check-box-yellow-black:checked + label::after {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  background-image: url("../images/check.svg");
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: center;
}

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: Grepper

Tags: checkbox pure-css whatever

Link to this answer
Share Copy Link

Contributed on Jan 22 2023

oussama ayadi

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

Custom Checkbox in Pure CSS

Contents

More Related Answers

Custom Checkbox in Pure CSS

Closely Related Answers

custom checkbox

Grepper

Documentation

Social

Legal

Contact

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