How to make checkboxes rounded?

Question

Is there any way to make checkboxes with rounded corners using bootstrap or some css property?

Answer 1

Just using css, however, you lose the checkbox tick.

.checkbox-round {     width: 1.3em;     height: 1.3em;     background-color: white;     border-radius: 50%;     vertical-align: middle;     border: 1px solid #ddd;     appearance: none;     -webkit-appearance: none;     outline: none;     cursor: pointer; }  .checkbox-round:checked {     background-color: gray; }

<input type="checkbox" class="checkbox-round" />

Answer 2

.container {    display: block;    position: relative;    padding-left: 35px;    margin-bottom: 12px;    cursor: pointer;    font-size: 22px;    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;      }    /* Hide the browser's default checkbox */  .container input {    position: absolute;    opacity: 0;    cursor: pointer;    height: 0;    width: 0;  }    /* Create a custom checkbox */  .checkmark {    position: absolute;    top: 0;    left: 0;    height: 25px;    width: 25px;    background-color: #eee;      border-radius: 15px;  }    /* On mouse-over, add a grey background color */  .container:hover input ~ .checkmark {    background-color: #ccc;  }    /* When the checkbox is checked, add a blue background */  .container input:checked ~ .checkmark {    background-color: #2196F3;  }    /* Create the checkmark/indicator (hidden when not checked) */  .checkmark:after {    content: "";    position: absolute;    display: none;  }    /* Show the checkmark when checked */  .container input:checked ~ .checkmark:after {    display: block;  }    /* Style the checkmark/indicator */  .container .checkmark:after {    left: 9px;    top: 5px;    width: 5px;    height: 10px;    border: solid white;    border-width: 0 3px 3px 0;    -webkit-transform: rotate(45deg);    -ms-transform: rotate(45deg);    transform: rotate(45deg);  }

<label class="container">One    <input type="checkbox" checked="checked">    <span class="checkmark"></span>  </label>  <label class="container">Two    <input type="checkbox">    <span class="checkmark"></span>  </label>  <label class="container">Three    <input type="checkbox">    <span class="checkmark"></span>  </label>  <label class="container">Four    <input type="checkbox">    <span class="checkmark"></span>  </label>