How to change checkbox background color with white color around?

Ask a question+

I’m looking for a solution on how to change CSS background color with padding or white color around the checkbox, I tried and play around using margin, padding height and etc., but no luck. So when user click the checkbox, it would show background color, it’s working, but I’d like to have white padding around the checkbox, is it possible?

.checkbox {
  margin: 0 0 1em 2em;
.checkbox .tag {
  color: #595959;
  display: block;
  float: left;
  font-weight: bold;
  position: relative;
  width: 120px;
.checkbox label {
  display: inline;
.checkbox .input-assumpte {
  display: none;
.input-assumpte + label:after {
  background-color: #fafafa;
  border: 1px solid #cacece;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
    inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  display: inline-block;
  transition-duration: 0.3s;
  width: 16px;
  height: 16px;
  content: "";
  margin-left: 10px;
  padding: 5px;
.input-assumpte:checked + label:after {
  background-color: #0e4caa;
  padding: 5px;
<div class="checkbox">
    <input type="checkbox" class="input-assumpte" id="input-confidencial" />
    <label for="input-confidencial">Confidencial</label>
add comment

0 Answer

Your Answer