CODEWITHSUNDEEP
htmlcssformscheckboxsass
user9325805
user9325805

Reputation: 25

Custom checkbox, change on :hover and :checked. Doesn't work

I have problem with my custom checkbox. I would like to change color to green on :hover and yellow on checked.

I tried almost 10 different ways :/ Someone could help me? Code Pen

    <body>
      <div class="container">


            <div class="form__checkbox">
              <label for="accept" class="form__checkbox-label">I have read and accept the terms of use.</label>
              <input type="checkbox" id="accept" class="form__checkbox-input">
            </div>

</body>

CSS (SASS): 

  &__checkbox {
    z-index: 2;
    position: relative;
    &-label {
      cursor: pointer;
      @include inputFonts();
      margin-left: 46px;
      padding: 0.5rem;
      font-size: 1.6rem;

      &::before {
        content: "";
        display: block;
        position: absolute;
        left: 2%;
        top: 50%;
        transform: translateY(-50%);
        height: 20px;
        width: 20px;
        background-color: blue;
        margin-right: 20px;
      }
      &:hover + &::before {
        background-color: red;
        height: 40px;
      }
    }
    &-input {
      position: absolute;
      top: -999999px;
      opacity: 0;
    }
  }

Upvotes: 0

Views: 4462

Answers (2)

user9325805
user9325805

Reputation: 25

I back to this code, and now I have problem with change checked button. I would like to add grey background and show "checked bird".

I tried various methods and it doesn't work..

Again Link https://codepen.io/direct96/pen/eLXMXY

&__checkbox {
z-index: 2;
position: relative;
&-label {
  cursor: pointer;
  @include inputFonts();
  margin-left: 46px;
  padding: 0.5rem;
  font-size: 1.6rem;

  &::before {
    content: "";
    display: block;
    position: absolute;
    left: 15px;
    margin-right: 50px;
    top: 50%;
    transform: translateY(-50%);
    height: 23px;
    width: 23px;
    background-color: $form-text-color;
  }
  &::after {
    content: "";
    position: absolute;
    display: none;
    left: 4.5%;
    top: 45%;
    background: white;
    width: 2.5px;
    height: 2.5px;
    box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white,
      4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
    transform: rotate(45deg);
  }

  &:hover::before {
    background-color: $color-input-focus;
  }
}

Upvotes: 0

JAM
JAM

Reputation: 6205

The selector &:hover + &::before will not work, because you are selecting the next element's psudo-element(+ &::before). What (I think) you want to do, is to change the current element's psudo-element.

I regards to the hover state, you can change this:

  &:hover + &::before { // compiled to: .form__checkbox-label:hover + .form__checkbox-label::before
    background-color: red;
    height: 40px;
  }

to this:

  &:hover:before { // compiled to: .form__checkbox-label:hover:before
    background-color: red;
    height: 40px;
  }

This will make the blue checkbox in your example turn red (with 40 px height) on hover.

Changing color based on checkbox state

In order to do this, you need to do a couble of things:

  1. Rearrange the html

    <div class="form__checkbox">
  <!-- input first! -->
  <input type="checkbox" id="accept" class="form__checkbox-input">
  <label for="accept" class="form__checkbox-label">I have read and accept the terms of use.</label>
</div>

  2. Add a css selector to your checkbox, targeting the "next sibling label" when :checked.

    &__checkbox {
  // abbreviated...

  &-input {
    // abbreviated...

    &:checked + .form__checkbox-label:before {
      background-color: green;
    }
  }
}

Upvotes: 1

Related Questions