3

How do I achieve this kind of checkbox (Image Shown Below) ? I tried some code, but it won't work as I expected. I am not familiar with css before, after pseudo elements.

enter image description here

JSFiddle

.chkbox {
  height: 15px;
  width: 15px;
  background-color: #fff;
  border: 1px solid #ddd;
  position: relative;
  transition: border-color ease 0.125s;
  -ms-transition: border-color ease 0.125s;
  -moz-transition: border-color ease 0.125s;
  -webkit-transition: border-color ease 0.125s;
  cursor: pointer;
  border-radius: 2px;
}
.chkbox:before {
  right: -1px;
  width: 1px;
  top: -1px;
  height: 8px
}
.chkbox:after {
  top: -1px;
  right: 0;
  width: 2px;
  height: 2px
}

6 Answers 6

3

Why not use clip-path? Remove pseudo-elements and just add something like clip-path: polygon(0 0, 65% 0%, 65% 25%, 100% 25%, 100% 100%, 0 100%);

.chkbox {
  height: 15px;
  width: 15px;
  background-color: #fff;
  border: 1px solid #ddd;
  position: relative;
  transition: border-color ease 0.125s;
  -ms-transition: border-color ease 0.125s;
  -moz-transition: border-color ease 0.125s;
  -webkit-transition: border-color ease 0.125s;
  cursor: pointer;
  border-radius: 2px;
  clip-path: polygon(0 0, 65% 0%, 65% 25%, 100% 25%, 100% 100%, 0 100%);
}
<div class="chkbox"></div>

That's very handy, by the way http://bennettfeely.com/clippy/

1

Here is an example.

.chkbox {
  display: none;
}

.chkbox+label {
  display: inline-block;
  color: #666666;
  position: relative;
  padding-left: 30px;
  margin: 7px 10px;
  font-size: 16px;
  line-height: 20px;
}

.chkbox+label:before {
  content: "";
  line-height: 20px;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  position: absolute;
  left: 0;
  top: -1px;
  border-radius: 3px;
  border: 1px solid #aaaaaa;
}

.chkbox+label:after {
  height: 7px;
  width: 7px;
  content: "";
  background-color: #ffffff;
  position: absolute;
  left: 13px;
  top: -1px;
}
<input type="checkbox" class="chkbox">
<label for="check1">Morning</label>

0

Try to override borders like this

.chkbox:before {
   content: "";
   width: 7px;
   height: 7px;
   background:white;
   position:absolute;
   right:-1px;
   top:-1px;
}

here is fiddle example for you https://jsfiddle.net/th9qpdvh/2/

You can also use image for this purpose

0

Try this

.chkbox {
    height: 15px;
    width: 15px;
    background-color: #fff;
    border: 1px solid #ddd;
    position: relative;
    transition: border-color ease 0.125s;
    -ms-transition: border-color ease 0.125s;
    -moz-transition: border-color ease 0.125s;
    -webkit-transition: border-color ease 0.125s;
    cursor: pointer;
    border-radius: 2px;
    box-shadow: 1px -1px 2px #ccc;
}
.chkbox:after {
    content: '';
    display: block;
    right: -3px;
    width: 9px;
    top: -3px;
    height: 9px;
    background: #fff;
    position: absolute;
}
<div class="chkbox"></div>

0

You cannot modify the input type="checkbox" element into the desired shape directly, because:

  1. Input elements don't have pseudo elements.
  2. You cannot use clip-path as mentioned in one of the answers because of very low browser support (if that is a concern for you.) CanIUse Reference

So I would suggest you to go with @Pugazh's answer

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"] + label {
    display: inline-block;
    position: relative;
    color: #404040;
    padding-left: 30px;
    margin: 7px 10px;
    font-size: 16px;
    line-height: 20px;
}

input[type="checkbox"] + label:before, input[type="checkbox"] + label:after {
    content: "";
    position: absolute;
    display: block;
}

input[type="checkbox"] + label:before {
    width: 18px;
    height: 18px;
    left: 0;
    top: -1px;
    border-radius: 3px;
    border: 1px solid #aaaaaa;
}

input[type="checkbox"] + label:after {
    height: 7px;
    width: 7px;
    background-color: #ffffff;
    left: 13px;
    top: -1px;
}
0

Hidden those corner borders using this below class.

Few other answers are good. But, it doesn't work on some browsers. Another answer affect my TICK css class. Finally I found this below solution to solve this issue without compatibility problems.

JsFiddle

.hideWhite{
width:10px;
height:10px;
background:#fff;
border-radius:50%;
position:absolute;
top:-2px;
right:-4px;
display:inline-block
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.