How from under input to influence label?

A

Alianos2021-03-25 15:26:04

css

Alianos, 2021-03-25 15:26:04

Hello, please tell me how to make it so that when you click on the checkbox on the label, an underscore appears.
My code does not work

<!DOCTYPE html>
<body>
  <label class="btn"><input type="checkbox" class="cht" />Sign up</label>
</body>
<style>
  .btn {
    transition: all 0.25s ease;
  }
  .btn :checked {
    color:red;
    border-bottom: solid 2px #1059ff;
    padding-bottom: 10px;
  }
</style>

</html>

I would like to get something like

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

R

Ross Alex, 2021-03-25
@Wacdis

<label class="btn"><input type="checkbox" class="cht" /><span></span>Sign up</label>

.btn {
    overflow:hidden;
    position:relative;
}
.btn input {
    visibility: hidden;
    position:absolute;
    left:-100%;
}
.btn span {
    display:inline-block;
    position: relative;
    width:32px;
    height:32px;
    border: 1px solid red;
    margin-right:8px;
}
.btn span:before {
    content:"";
    transition: all 0.25s ease;
    opacity:0;
    position: absolute;
    background-color: red;
    width:16px;
    height:16px;
    left: 8px;
    top:8px;
}
.btn input:checked + span:before {opacity:1;}

ps.. I write without verification from the phone :)