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

change checkbox border color

Add Answer

Anass Azeroual answered on August 31, 2022 Popularity 10/10 Helpfulness 5/10

answer change checkbox border color

related change checkbox color css

related how to change the checkbox border color in css

related change checkbox checked color css

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 checkbox css

Link to this answer
Share Copy Link

Contributed on Mar 02 2023

Anass Azeroual

0 Answers Avg Quality 2/10

Closely Related Answers

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

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 8/10 Helpfulness 5/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

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

change checkbox border color

Contents

More Related Answers

change checkbox border color

Closely Related Answers

change checkbox color css

how to change the checkbox border color in 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.