Search code examples
htmlcssinputsassstyles

Style input radio with css


I have a problem with radio input css. The slider background is not beneath the label.

I trying with z-index but it didn't work.enter code here


<div class="toggle_radio">
  <input type="radio" class="toggle_option" id="first_toggle" name="toggle_option">
  <input type="radio" class="toggle_option" id="second_toggle" name="toggle_option">
  <label for="first_toggle">first</label>
  <label for="second_toggle">second</label>
  <div class="toggle_option_slider"></div>
</div>

https://codepen.io/maytad/pen/KKzYRWE


Solution

  • .toggle_radio label position: relative and z-index

    .toggle_radio label {
      opacity: 0.99;
      font-size: 20px;
      display: block;
      width: 115px;
      height: 32px;
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      position: relative; // new
      z-index: 5; // new
    }
    

    https://codepen.io/zhishaofei3/pen/VwaNRRa