I'm outdated I know.. But a little workaround would be to put your checkbox inside a label tag, then style the label with a border:
<label class='hasborder'><input type='checkbox' /></label>
then style the label:
.hasborder { border:1px solid #F00; }
Here is a pure CSS (no images) cross-browser solution based on Martin's Custom Checkboxes and Radio Buttons with CSS3 LINK: http://martinivanov.net/2012/12/21/imageless-custom-checkboxes-and-radio-buttons-with-css3-revisited/
Here is a jsFiddle: http://jsfiddle.net/DJRavine/od26wL6n/
I have tested this on the following browsers:
label,_x000D_
input[type="radio"] + span,_x000D_
input[type="radio"] + span::before,_x000D_
label,_x000D_
input[type="checkbox"] + span,_x000D_
input[type="checkbox"] + span::before_x000D_
{_x000D_
display: inline-block;_x000D_
vertical-align: middle;_x000D_
}_x000D_
_x000D_
label *,_x000D_
label *_x000D_
{_x000D_
cursor: pointer;_x000D_
}_x000D_
_x000D_
input[type="radio"],_x000D_
input[type="checkbox"]_x000D_
{_x000D_
opacity: 0;_x000D_
position: absolute;_x000D_
}_x000D_
_x000D_
input[type="radio"] + span,_x000D_
input[type="checkbox"] + span_x000D_
{_x000D_
font: normal 11px/14px Arial, Sans-serif;_x000D_
color: #333;_x000D_
}_x000D_
_x000D_
label:hover span::before,_x000D_
label:hover span::before_x000D_
{_x000D_
-moz-box-shadow: 0 0 2px #ccc;_x000D_
-webkit-box-shadow: 0 0 2px #ccc;_x000D_
box-shadow: 0 0 2px #ccc;_x000D_
}_x000D_
_x000D_
label:hover span,_x000D_
label:hover span_x000D_
{_x000D_
color: #000;_x000D_
}_x000D_
_x000D_
input[type="radio"] + span::before,_x000D_
input[type="checkbox"] + span::before_x000D_
{_x000D_
content: "";_x000D_
width: 12px;_x000D_
height: 12px;_x000D_
margin: 0 4px 0 0;_x000D_
border: solid 1px #a8a8a8;_x000D_
line-height: 14px;_x000D_
text-align: center;_x000D_
_x000D_
-moz-border-radius: 100%;_x000D_
-webkit-border-radius: 100%;_x000D_
border-radius: 100%;_x000D_
_x000D_
background: #f6f6f6;_x000D_
background: -moz-radial-gradient(#f6f6f6, #dfdfdf);_x000D_
background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);_x000D_
background: -ms-radial-gradient(#f6f6f6, #dfdfdf);_x000D_
background: -o-radial-gradient(#f6f6f6, #dfdfdf);_x000D_
background: radial-gradient(#f6f6f6, #dfdfdf);_x000D_
}_x000D_
_x000D_
input[type="radio"]:checked + span::before,_x000D_
input[type="checkbox"]:checked + span::before_x000D_
{_x000D_
color: #666;_x000D_
}_x000D_
_x000D_
input[type="radio"]:disabled + span,_x000D_
input[type="checkbox"]:disabled + span_x000D_
{_x000D_
cursor: default;_x000D_
_x000D_
-moz-opacity: .4;_x000D_
-webkit-opacity: .4;_x000D_
opacity: .4;_x000D_
}_x000D_
_x000D_
input[type="checkbox"] + span::before_x000D_
{_x000D_
-moz-border-radius: 2px;_x000D_
-webkit-border-radius: 2px;_x000D_
border-radius: 2px;_x000D_
}_x000D_
_x000D_
input[type="radio"]:checked + span::before_x000D_
{_x000D_
content: "\2022";_x000D_
font-size: 30px;_x000D_
margin-top: -1px;_x000D_
}_x000D_
_x000D_
input[type="checkbox"]:checked + span::before_x000D_
{_x000D_
content: "\2714";_x000D_
font-size: 12px;_x000D_
}_x000D_
_x000D_
_x000D_
_x000D_
input[class="blue"] + span::before_x000D_
{_x000D_
border: solid 1px blue;_x000D_
background: #B2DBFF;_x000D_
background: -moz-radial-gradient(#B2DBFF, #dfdfdf);_x000D_
background: -webkit-radial-gradient(#B2DBFF, #dfdfdf);_x000D_
background: -ms-radial-gradient(#B2DBFF, #dfdfdf);_x000D_
background: -o-radial-gradient(#B2DBFF, #dfdfdf);_x000D_
background: radial-gradient(#B2DBFF, #dfdfdf);_x000D_
}_x000D_
input[class="blue"]:checked + span::before_x000D_
{_x000D_
color: darkblue;_x000D_
}_x000D_
_x000D_
_x000D_
_x000D_
input[class="red"] + span::before_x000D_
{_x000D_
border: solid 1px red;_x000D_
background: #FF9593;_x000D_
background: -moz-radial-gradient(#FF9593, #dfdfdf);_x000D_
background: -webkit-radial-gradient(#FF9593, #dfdfdf);_x000D_
background: -ms-radial-gradient(#FF9593, #dfdfdf);_x000D_
background: -o-radial-gradient(#FF9593, #dfdfdf);_x000D_
background: radial-gradient(#FF9593, #dfdfdf);_x000D_
}_x000D_
input[class="red"]:checked + span::before_x000D_
{_x000D_
color: darkred;_x000D_
} <label><input type="radio" checked="checked" name="radios-01" /><span>checked radio button</span></label>_x000D_
<label><input type="radio" name="radios-01" /><span>unchecked radio button</span></label>_x000D_
<label><input type="radio" name="radios-01" disabled="disabled" /><span>disabled radio button</span></label>_x000D_
_x000D_
<br/>_x000D_
_x000D_
<label><input type="radio" checked="checked" name="radios-02" class="blue" /><span>checked radio button</span></label>_x000D_
<label><input type="radio" name="radios-02" class="blue" /><span>unchecked radio button</span></label>_x000D_
<label><input type="radio" name="radios-02" disabled="disabled" class="blue" /><span>disabled radio button</span></label>_x000D_
_x000D_
<br/>_x000D_
_x000D_
<label><input type="radio" checked="checked" name="radios-03" class="red" /><span>checked radio button</span></label>_x000D_
<label><input type="radio" name="radios-03" class="red" /><span>unchecked radio button</span></label>_x000D_
<label><input type="radio" name="radios-03" disabled="disabled" class="red" /><span>disabled radio button</span></label>_x000D_
_x000D_
<br/>_x000D_
_x000D_
<label><input type="checkbox" checked="checked" name="checkbox-01" /><span>selected checkbox</span></label>_x000D_
<label><input type="checkbox" name="checkbox-02" /><span>unselected checkbox</span></label>_x000D_
<label><input type="checkbox" name="checkbox-03" disabled="disabled" /><span>disabled checkbox</span></label>_x000D_
_x000D_
<br/>_x000D_
_x000D_
<label><input type="checkbox" checked="checked" name="checkbox-01" class="blue" /><span>selected checkbox</span></label>_x000D_
<label><input type="checkbox" name="checkbox-02" class="blue" /><span>unselected checkbox</span></label>_x000D_
<label><input type="checkbox" name="checkbox-03" disabled="disabled" class="blue" /><span>disabled checkbox</span></label>_x000D_
_x000D_
<br/>_x000D_
_x000D_
<label><input type="checkbox" checked="checked" name="checkbox-01" class="red" /><span>selected checkbox</span></label>_x000D_
<label><input type="checkbox" name="checkbox-02" class="red" /><span>unselected checkbox</span></label>_x000D_
<label><input type="checkbox" name="checkbox-03" disabled="disabled" class="red" /><span>disabled checkbox</span></label>Here is a simple way (to use before or after pseudo elements / classes):
input[type=checkbox] {
position: relative;
}
input[type=checkbox]:after {
position: absolute;
top: 0;
left: 0;
/* Above three lines allow the checkbox:after position at checkbox's position */
content: '';
width: 32px;
height: 32px;
z-index: 1; /* This allows the after overlap the checkbox */
/* Anything you want */
}
Here's my version that uses FontAwesome for checkbox ticker, I think FontAwesome is used by almost everybody so it's safe to assume you have it too. Not tested in IE/Edge and I don't think anyone cares.
input[type=checkbox] {_x000D_
-moz-appearance:none;_x000D_
-webkit-appearance:none;_x000D_
-o-appearance:none;_x000D_
outline: none;_x000D_
content: none; _x000D_
}_x000D_
_x000D_
input[type=checkbox]:before {_x000D_
font-family: "FontAwesome";_x000D_
content: "\f00c";_x000D_
font-size: 15px;_x000D_
color: transparent !important;_x000D_
background: #fef2e0;_x000D_
display: block;_x000D_
width: 15px;_x000D_
height: 15px;_x000D_
border: 1px solid black;_x000D_
margin-right: 7px;_x000D_
}_x000D_
_x000D_
input[type=checkbox]:checked:before {_x000D_
_x000D_
color: black !important;_x000D_
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>_x000D_
_x000D_
<input type="checkbox"><!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<style> _x000D_
_x000D_
.abc123_x000D_
{_x000D_
-webkit-appearance:none;_x000D_
width: 14px;_x000D_
height: 14px;_x000D_
display: inline-block;_x000D_
background: #FFFFFF;_x000D_
border: 1px solid rgba(220,220,225,1);_x000D_
}_x000D_
.abc123:after {_x000D_
content: "";_x000D_
display: inline-block;_x000D_
position: relative;_x000D_
top: -3px;_x000D_
left: 4px;_x000D_
width: 3px;_x000D_
height: 5px;_x000D_
border-bottom: 1px solid #fff;_x000D_
border-right: 1px solid #fff;_x000D_
-webkit-transform: rotate(45deg);_x000D_
}_x000D_
_x000D_
input[type=checkbox]:checked {_x000D_
background: #327DFF;_x000D_
outline: none;_x000D_
border: 1px solid rgba(50,125,255,1);_x000D_
}_x000D_
input:focus,input:active {_x000D_
outline: none;_x000D_
}_x000D_
_x000D_
input:hover {_x000D_
border: 1px solid rgba(50,125,255,1);_x000D_
}_x000D_
_x000D_
</style>_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
<input class="abc123" type="checkbox"></input>_x000D_
_x000D_
_x000D_
</body>_x000D_
</html>For Firefox, Chrome and Safari, nothing happens.
For IE the border is applied outside the checkbox (not as part of the checkbox), and the "fancy" shading effect in the checkbox is gone (displayed as an oldfashioned checkbox).
For Opera the border style is actually applying the border on the checkbox element.
Opera also handles other stylings on the checkbox better than other browsers: color is applied as the color of the tick, background-color is applied as background color inside the checkbox (IE applies the background as if the checkbox was inside a <div> with background)).
The easiest solution is to wrap the checkbox inside a <div> like others have suggested.
If you want to completely control the appearance you will have to go with the advanced image/javascript approach, also meantiond by others.
You should use
-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;
Then you get rid of the default checkbox image/style and can style it. Anyway a border will still be there in Firefox
No, you still can't style the checkbox itself, but I (finally) figured out how to style an illusion while keeping the functionality of clicking a checkbox. It means that you can toggle it even if the cursor isn't perfectly still without risking selecting text or triggering drag-and-drop!
The example is using a span "button" as well as some text in a label, but it gives you the idea of how you can make the checkbox invisible and draw anything behind it.
This solution probably also fits radio buttons.
The following works in IE9, FF30.0 and Chrome 40.0.2214.91 and is just a basic example. You can still use it in combination with background images and pseudo-elements.
http://jsfiddle.net/o0xo13yL/1/
label {
display: inline-block;
position: relative; /* needed for checkbox absolute positioning */
background-color: #eee;
padding: .5rem;
border: 1px solid #000;
border-radius: .375rem;
font-family: "Courier New";
font-size: 1rem;
line-height: 1rem;
}
label > input[type="checkbox"] {
display: block;
position: absolute; /* remove it from the flow */
width: 100%;
height: 100%;
margin: -.5rem; /* negative the padding of label to cover the "button" */
cursor: pointer;
opacity: 0; /* make it transparent */
z-index: 666; /* place it on top of everything else */
}
label > input[type="checkbox"] + span {
display: inline-block;
width: 1rem;
height: 1rem;
border: 1px solid #000;
margin-right: .5rem;
}
label > input[type="checkbox"]:checked + span {
background-color: #666;
}<label>
<input type="checkbox" />
<span> </span>Label text
</label><div style="border-style: solid;width:13px">
<input type="checkbox" name="mycheck" style="margin:0;padding:0;">
</input>
</div>
I suggest using "outline" instead of "border". For example: outline: 1px solid #1e5180.
Styling checkboxes (and many other input elements for that mater) is not really possible with pure css if you want to drastically change the visual appearance.
Your best bet is to implement something like jqTransform does which actually replaces you inputs with images and applies javascript behaviour to it to mimic a checkbox (or other element for that matter)
You can use box shadows to fake a border:
-webkit-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
-moz-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
put it in a div and add border to the div
Source: Stackoverflow.com