I have a check box in my table. this is css of that checkbox
input[type="checkbox"] {
width: 20px;
height: 30px;
margin: auto;
display: table-row;
border: 5px solid red;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: 4px;
margin-top: 1px;
}
but it shows normal checkbox. I want to change the border color of that checkbox. but it doesn't work!!!
You can put only below css for checkbox border and see Fiddle Demo
CSS:
.error input[type=checkbox] {
outline: 2px solid #c00;
}
Try this customized the checkbox code:
/* Remove default checkbox */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
overflow: hidden;
padding-left: 35px;
cursor: pointer;
display: inline-block;
height: 25px;
line-height: 25px;
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
}
/* checkbox aspect */
[type="checkbox"] + label:before,
[type="checkbox"] + label:after {
content: '';
position: absolute;
left: 0;
z-index: 1;
-webkit-transition: .2s;
transition: .2s;
}
/* Unchecked styles */
[type="checkbox"]:not(:checked) + label:before {
top: 0px;
width: 19px; height: 19px;
border: 1px solid red;
}
[type="checkbox"]:not(:checked) + label:after {
top: 0px;
width: 19px; height: 19px;
border: 1px solid red;
z-index: 0;
}
/* Checked styles */
[type="checkbox"]:checked + label:before {
top: 2px;
width: 6px; height: 12px;
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid red;
border-bottom: 1px solid red;
-webkit-transform: rotateZ(37deg);
transform: rotateZ(37deg);
-webkit-transform-origin: 20% 40%;
transform-origin: 100% 100%;
}
[type="checkbox"]:checked + label:after {
top: 0px;
width: 19px; height: 19px;
border: 1px solid red;
z-index: 0;
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
top: 0;
box-shadow: none;
background-color: #444;
width: 19px; height: 19px;
border: 3px solid #444;
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
[type="checkbox"]:disabled + label {
color: #555;
}
[type="checkbox"]:disabled:not(:checked) + label:hover:before {
border-color: red;
}<form action="#">
<p>
<input type="checkbox" id="test1" />
<label for="test1">Red</label>
</p>
<p>
<input type="checkbox" id="test2" checked="checked" />
<label for="test2">Yellow</label>
</p>
</form>I guess HTML does not allow adding border styles to check boxes. Try using the outline property instead.
