CODEWITHSUNDEEP
css
noblerare
noblerare

Reputation: 11873

Adding a transition effect when hovering over a custom CSS checkbox

I have a custom CSS checkbox as seen here: https://jsfiddle.net/apewjcg9/

Don't worry too much about the positioning and sizing of things. My main question is to deal with adding an ease-in transition when hovering over the checkbox. As you can see, when hovering, I have a border being applied to the box itself. However, I'd like a small ease-in transition effect for that border. No matter what I have tried, no transition appears to be applied.

HTML

<input type="checkbox" class="checkbox" id="myCheckbox" />
<label class="checkboxLabel" for="myCheckbox">This is a checkbox label</label>

CSS

.checkbox {
  opacity: 0;
  position: absolute;
}

.checkbox + .checkboxLabel::before {
  background-color: white;
  border: 1px solid black;
  border-radius: 2px;
  content: '';
  display: inline-block;
  height: 18px;
  width: 18px;
  font-size: 16.5px;
  text-align: center;
  vertical-align: top;
  margin-right: 5px;
}

.checkbox:checked + .checkboxLabel::before  {
  background-color: firebrick;
  border-radius: 2px;
  color: white;
  content: '\2713';
  font-size: 19px;
  line-height: 18px;
}

.checkboxLabel {
  cursor: pointer;
  display: inline-block;
  margin: 0;
}

.checkbox:hover + .checkboxLabel::before {
  border: 1.5px solid firebrick;
  box-sizing: border-box;
}

I've tried adding transition: border 1s to .checkbox + .checkboxLabel::before, to the label itself, to the input, nothing has worked as far as making that ease-in transition happen.

Upvotes: 1

Views: 699

Answers (3)

Sonam Gupta
Sonam Gupta

Reputation: 383

You can try changing the to make the transition effect visible clearly and then add {transition} property for the {border-width} and {border-color} in color by making these changes to the code.

.checkbox:hover + .checkboxLabel::before {
      border: 4px solid firebrick;
      box-sizing:border-box;
      transition:
          border-width 0s ease-in 0.25s,
          border-color 0.25s ease-in 0.5s;
      
    }

Upvotes: 0

Samir Selia
Samir Selia

Reputation: 7065

You can use transition property to time the duration of the transition and then use transform: scale(x) to give it a zoom effect.

.checkbox {
  opacity: 0;
  position: absolute;
}

.checkbox+.checkboxLabel::before {
  background-color: white;
  border: 1px solid black;
  border-radius: 2px;
  content: '';
  display: inline-block;
  height: 18px;
  width: 18px;
  font-size: 16.5px;
  text-align: center;
  vertical-align: top;
  margin-right: 5px;
}

.checkbox:checked+.checkboxLabel::before {
  background-color: firebrick;
  border-radius: 2px;
  color: white;
  content: '\2713';
  font-size: 19px;
  line-height: 18px;
}

.checkboxLabel {
  cursor: pointer;
  display: inline-block;
  margin: 0;
}

.checkbox:hover+.checkboxLabel::before {
  border: 1.5px solid firebrick;
  transition: 0.5s;
  transform: scale(1.1);
}
<input type="checkbox" class="checkbox" id="myCheckbox" />
<label class="checkboxLabel" for="myCheckbox">This is a checkbox label</label>

Upvotes: 2

nicolacarys
nicolacarys

Reputation: 36

It looks like you got really close to the solution when trying to use transition: border 1s, just a small tweak to move it to the hover styling and it should work as you intended.

Something like the below will transition the colour. The box-sizing property that you've got on there currently will be changing the positioning of the box slightly which could be a little jarring - you could remove this if you wanted the box size/shape to stay the same.

.checkbox:hover + .checkboxLabel::before {
  border: 1.5px solid firebrick;
  box-sizing: border-box; <--- removing this will create a smoother transition
  transition: border 0.4s ease;
}

I've opted for ease in the transition, but here's a guide to help you decide which transition timing to go for.

Upvotes: 1

Related Questions