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

checkbox background color change css

Add Answer

Bored Barracuda answered on February 4, 2022 Popularity 10/10 Helpfulness 3/10

answer checkbox background color change css

related change the color of a checkbox css

related change checkbox color css

related change checkbox tick color css

related how to change the checkbox border color in css

related css checkbox'':checked change color

related change checkbox border color

related checkbox checked color change css

related change checkbox checked color css

checkbox background color change css

Comment

<div class="chek-box">
  <input type="checkbox" />
  <label class="wpforms-field-label-inline">Agree privacy</label>
</div>

<style>
.chek-box li.choice-1.depth-1 {
    position: relative;
}
.chek-box label.wpforms-field-label-inline:after {
    content: '';
    width: 18px;
    height: 18px;
    background: transparent;
    position: absolute;
    display: inline-block;
    left: 0px;
    top: 2px;
    z-index: -1;
    opacity: 1;
    border: 1px solid red;
}
.chek-box input[type="checkbox"] {
    opacity: 0;
}
.chek-box input[type="checkbox"]:checked ~ label.wpforms-field-label-inline:after {
  background: red;
}
.chek-box input[type="checkbox"]:checked ~ label.wpforms-field-label-inline:before {
  opacity: 1;
}
label.wpforms-field-label-inline:before {
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    content: '';
    z-index: 9999999;
    position: absolute;
    display: inline-block;
    left: 6px;
    top: 4px;
opacity: 0;
}
</style>


<!-- M.Sajjad Rogi -->
<!-- Web Designer & Developer -->
<!-- +92 302 2020 318 -->
<!-- msrogi6@gmailcom -->

Popularity 10/10 Helpfulness 3/10 Language html

Source: Grepper

Tags: background-color checkbox css html

Link to this answer
Share Copy Link

Contributed on Nov 04 2022

Bored Barracuda

0 Answers Avg Quality 2/10

Closely Related Answers

change the color of a checkbox css

Comment

input[type="checkbox"] {
  accent-color: red;
}

Popularity 10/10 Helpfulness 10/10 Language css

Source: Grepper

Tags: checkbox checkbo

Link to this answer
Share Copy Link

Contributed on Feb 24 2022

Anxious Ape

0 Answers Avg Quality 2/10

change checkbox color css

Comment

input[type="checkbox"] {
  -webkit-appearance: none; /* Remove default checkbox style on Safari */
  -moz-appearance: none; /* Remove default checkbox style on Firefox */
  appearance: none; /* Remove default checkbox style on other browsers */
  width: 20px; /* Adjust the size of the checkbox */
  height: 20px; /* Adjust the size of the checkbox */
  border-radius: 4px; /* Add some border radius for a rounded look */
  outline: none; /* Remove the highlight when focused */
  transition: background-color 0.3s; /* Add a smooth transition effect */
}

input[type="checkbox"]::before {
  content: "";
  display: inline-block;
  width: 20px; /* Adjust the size of the pseudo-element */
  height: 20px; /* Adjust the size of the pseudo-element */
  background-color: gray; /* Set the desired checkbox color */
  border: 1px solid darkgray; /* Add a border for better visibility */
}

input[type="checkbox"]:checked::before {
  background-color: green; /* Set the color when the checkbox is checked */
}

Popularity 9/10 Helpfulness 10/10 Language css

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

change checkbox tick color css

Comment

input[type="checkbox"] {
  /* Hide the default checkbox tick */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Set the desired tick color */
  background-color: red;
  /* Add a custom tick symbol using a pseudo-element */
  position: relative;
}

input[type="checkbox"]::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid white; /* Style the tick */
  background-color: inherit;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the tick */
}

input[type="checkbox"]:checked::before {
  background-color: green; /* Change the color of the tick when the checkbox is checked */
}

Popularity 9/10 Helpfulness 8/10 Language css

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

how to change the checkbox border color in css

Comment

input[type=checkbox] {
	-moz-appearance:none;
	-webkit-appearance:none;
	-o-appearance:none;
	outline: none;
	content: none;	
}

input[type=checkbox]:before {
	font-family: "FontAwesome";
    content: "\f00c";
    font-size: 15px;
    color: transparent !important;
    background: #fef2e0;
    display: block;
    width: 15px;
    height: 15px;
    border: 1px solid black;
    margin-right: 7px;
}

input[type=checkbox]:checked:before {

	color: black !important;
}

Popularity 9/10 Helpfulness 7/10 Language css

Source: Grepper

Tags: border-color border-col

Link to this answer
Share Copy Link

Contributed on Nov 16 2023

Mubeen Naeem

0 Answers Avg Quality 2/10

css checkbox'':checked change color

Comment

<label for="checkbox1" class="checkbox">
  <input id="checkbox1" type="checkbox" role="checkbox" />
  <span class="custom">Checkbox</span>
</label>


input[type="checkbox"]#checkbox1:checked + span {
      border-color: red;
    background-color:red;
}

Popularity 10/10 Helpfulness 5/10 Language css

Source: stackoverflow.com

Tags: css

Link to this answer
Share Copy Link

Contributed on Feb 04 2022

MitchAloha

0 Answers Avg Quality 2/10

change checkbox border color

Comment

// Angular
// you need to toggle class .appearance
.appearance{
    appearance: none;
	border: 1px solid red;
}

<input type="checkbox" [ngClass]="{'appearance': !model}">

Popularity 10/10 Helpfulness 5/10 Language css

Source: Grepper

Tags: border-color border-col

Link to this answer
Share Copy Link

Contributed on Mar 02 2023

Anass Azeroual

0 Answers Avg Quality 2/10

checkbox checked color change css

Comment

//HTML example
<label for="checkbox-one" >
  <input id="checkbox-one" type="checkbox" role="checkbox" /><p>Text</p>
</label>


//CSS solution
input[type="checkbox"]#checkbox-one:checked + p {
       color: blue; 
}

Popularity 10/10 Helpfulness 5/10 Language css

Source: Grepper

Tags: checkbox checkbo

Link to this answer
Share Copy Link

Contributed on Sep 08 2022

Poghosyan

0 Answers Avg Quality 2/10

change checkbox checked color css

Comment

<!DOCTYPE html>
<html>
<head>
	<style>
		.main {
			display: block;
			position: relative;
			padding-left: 45px;
			margin-bottom: 15px;
			cursor: pointer;
			font-size: 20px;
		}
		
		/* Hide the default checkbox */
		input[type=checkbox] {
			visibility: hidden;
		}
		
		/* Creating a custom checkbox
		based on demand */
		.geekmark {
			position: absolute;
			top: 0;
			left: 0;
			height: 25px;
			width: 25px;
			background-color: black;
		}
		
		/* Specify the background color to be
		shown when hovering over checkbox */
		.main:hover input ~ .geekmark {
			background-color: yellow;
		}
		
		/* Specify the background color to be
		shown when checkbox is active */
		.main input:active ~ .geekmark {
			background-color: red;
		}
		
		/* Specify the background color to be
		shown when checkbox is checked */
		.main input:checked ~ .geekmark {
			background-color: green;
		}
		
		/* Checkmark to be shown in checkbox */
		/* It is not be shown when not checked */
		.geekmark:after {
			content: "";
			position: absolute;
			display: none;
		}
		
		/* Display checkmark when checked */
		.main input:checked ~ .geekmark:after {
			display: block;
		}
		
		/* Styling the checkmark using webkit */
		/* Rotated the rectangle by 45 degree and
		showing only two border to make it look
		like a tickmark */
		.main .geekmark:after {
			left: 8px;
			bottom: 5px;
			width: 6px;
			height: 12px;
			border: solid white;
			border-width: 0 4px 4px 0;
			-webkit-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			transform: rotate(45deg);
		}
	</style>
</head>

<body>
	
	<h1 style="color:green;">
		Best Computer Science Platform
	</h1>
	
	<label class="main">CodeX
		<input type="checkbox">
		<span class="geekmark"></span>
	</label>
	
	<label class="main">GeeksforGeeks
		<input type="checkbox" checked="checked">
		<span class="geekmark"></span>
	</label>
	
	<label class="main">CodeY
		<input type="checkbox">
		<span class="geekmark"></span>
	</label>
</body>
</html>

Popularity 10/10 Helpfulness 3/10 Language html

Source: www.geeksforgeeks.org

Tags: checkbox checkbo

Link to this answer
Share Copy Link

Contributed on Aug 31 2022

Mehedi Islam Ripon

0 Answers Avg Quality 2/10

checkbox background color change css

Contents

More Related Answers

checkbox background color change css

Closely Related Answers

change the color of a checkbox css

change checkbox color css

change checkbox tick color css

how to change the checkbox border color in css

css checkbox'':checked change color

change checkbox border color

checkbox checked color change css

change checkbox checked color css

Grepper

Documentation

Social

Legal

Contact

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