Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Woocommerce – How to design non fill rounded checkbox using pure css

I am making a styled rounded checkbox for woocommerce . The Problem is my checkbox is now fill inside . How Can I make it thin inside without filling?

enter image description here

input#createaccount:checked {
	background-color: #253849;
}

input#createaccount{
	position: relative;
    margin-left: 4px;
    width: 25px;
    float: left;
    margin: 2px 10px 2px 1px;
    height: 25px;
    border-radius: 50%;
    vertical-align: middle;
    border: 4px solid #295282;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}
<input class="input-checkbox" id="createaccount" type="checkbox" name="createaccount" value="1">
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Simple adding inner shadow solve the issue 

    box-shadow: inset 0px 0px 0px 5px #ffffff;


    input#createaccount:checked {
    background-color: #253849;
    box-shadow: inset 0px 0px 0px 5px #ffffff;
    transition: 0.5s;
}

input#createaccount{
    position: relative;
    margin-left: 4px;
    width: calc(3em - 4px);
    height: calc(3em - 4px);
    float: left;
    margin: 4px 10px 2px 1px;
    border-radius: 50%;
    vertical-align: middle;
    border: 5px solid #295282;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    transition: 0.5s;
}
    <input class="input-checkbox" id="createaccount" type="checkbox" name="createaccount" value="1">


  2. 0

    One way to do this without javascript would be to create one wrapper element with input and one more element as a indicator for checkbox state. That way you can use selector input:checked + nextElement and change style of second element based on checkbox status.

    Then you just have to hide checkbox with opacity: 0. With this approach you can also use transitions and transforms on the inner element.

    .checkbox-el {
  position: relative;
  margin-left: 4px;
  width: 25px;
  float: left;
  margin: 2px 10px 2px 1px;
  height: 25px;
  border-radius: 50%;
  vertical-align: middle;
  border: 2px solid #295282;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  padding: 5px;
}

.checkbox-el input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: -3px;
  left: -3px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
}

.checkbox-circle {
  position: relative;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform: scale(0.5);
  transition: all 0.25s ease-in;
}

.checkbox-el input:checked + .checkbox-circle {
  background-color: #253849;
  transform: scale(1)
}
    <span class="checkbox-el">
  <input class="input-checkbox" id="createaccount" type="checkbox" name="createaccount" value="1">
  <div class="checkbox-circle"></div>
</span>
    Login or Signup to reply.
  3. 0

    Here is another trick with a simple background where you color the content-box and you animate the padding. You will also have transparency:

    input#createaccount:checked {
  padding:3px;
}

input#createaccount {
  width: 25px;
  float: left;
  margin: 2px 10px 2px 1px;
  height: 25px;
  border-radius: 50%;
  vertical-align: middle;
  border: 4px solid #295282;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  box-sizing:border-box;
  background: #253849 content-box;
  padding:8.5px; /* 25/2 - 4 */
  transition:0.3s all;
}

body {
 background:pink;
}
    <input class="input-checkbox" id="createaccount" type="checkbox" name="createaccount" value="1">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search