.contests input[type="checkbox"]{
background: #fff;
margin-right: 10px;
border: 1px solid #fff;
width: 1rem;
}
.contests input[type="checkbox"]{
background: #fff;
margin-right: 10px;
border: 1px solid #fff;
width: 1rem;
}
I want to change the border color checkbox how can I change this
CodePudding user response:
you have to use outline styles like this
.contests input[type="checkbox"]{
outline-style: solid;
outline-color: red;
}
CodePudding user response:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.form-group input {
padding: 0;
height: initial;
width: initial;
margin-bottom: 0;
display: none;
cursor: pointer;
}
.form-group label {
position: relative;
cursor: pointer;
}
.form-group label: before {
content:'';
-WebKit-appearance: none;
background-color: transparent;
border: 2px solid #0079bf;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px
rgba(0, 0, 0, 0.05);
padding: 10px;
display: inline-block;
position: relative;
vertical-align: middle;
cursor: pointer;
margin-right: 5px;
}
.form-group input:checked label:after {
content: '';
display: block;
position: absolute;
top: 2px;
left: 9px;
width: 6px;
height: 14px;
border: solid #0079bf;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div >
<form>
<div >
<input type="checkbox" id="html">
<label for="html">HTML</label>
</div>
</form>
</div>
</body>
</html>