jQuery toggleClass example

Toggle class name on click in jQuery

by moshfeu

HTML

<div class="range-wrapper clickable">
  <label>VALUE</label>
  <input type="text" name="inn" id="inn">
  <label class="span" for="inn">Some Value</label>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color: #eee;
}

.range-wrapper {
    display: flex;
    flex-direction: column;
    border: 1px solid white;
    border-radius: 5px;
    width: 10vw;
    height: 2rem;
}

.range-wrapper>label,
.range-wrapper>.span {
    /* pointer-events: none; */
}

.range-wrapper>label {
    text-align: left;
    font-size: x-small;
    font-weight: bold;
}

.range-wrapper>.span {
    font-size: medium;
    font-weight: bold;
}

.clickable {
    cursor: pointer;
}


.range-wrapper>input:not(:focus) {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

.range-wrapper>input:focus + .span {
  display: none;
}