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

chekbox checked color

Amjad Saeed answered on August 31, 2022 Popularity 7/10 Helpfulness 2/10

answer chekbox checked color

related change checkbox checked color css

chekbox checked color

Comment

#cb1 {
  accent-color: #9b59b6;
}

<input id="cb1" type="checkbox" checked />

Popularity 7/10 Helpfulness 2/10 Language whatever

Source: Grepper

Tags: checked whatever

Link to this answer
Share Copy Link

Contributed on Nov 27 2023

Amjad Saeed

0 Answers Avg Quality 2/10

Closely Related Answers

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

chekbox checked color

Contents

More Related Answers

chekbox checked color

Closely Related Answers

change checkbox checked color css

Grepper

Documentation

Social

Legal

Contact

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