如何在自定义 div 上拉伸标签以实现单选按钮点击

Question

我正在尝试制作自定义单选按钮。我发现 this 整洁的风格，我想稍微调整一下，以便项目 horizontally.Consider 的布局如下 html:

<div style="margin-left:30px;">
  <div class='container'>
<input type="radio" id="rdArts" name="itemcat">
    <label for="rdArts">Arts</label>    
    <div class="check"></div>
</div>

<div class='container'>
    <input type="radio" id="rdElectronics" name="itemcat">
    <label for="rdElectronics">Electronics</label>

    <div class="check"></div>
</div>

<div class='container'>
    <input type="radio" id="rdCars" name="itemcat">
    <label for="rdCars">Cars</label>

    <div class="check"></div>
</div>
  </div>

和这个 css:

.container{
  float:left;
  position:relative;
  margin-right:20px;
}

.container input[type=radio]{
  position: absolute;
  visibility: hidden;
}

.container label{
  display: block;
  position: ;
  font-weight: 300;
  font-size: 1.2em;
  padding: 25px 25px 25px 10px;
  margin: 10px auto;
  height: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}
.container:hover label{
    color: #485776;
}

.container:hover .check{
    border-color: #485776;
}

.container:hover .check::border{
    background-color: #485776;
}
.container .check{
  display: block;
  position: relative;
  border: 4px solid #333E54;
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: -67px;
  left: -25px;
    z-index: 5;
    transition: border .25s linear;
    -webkit-transition: border .25s linear;  
}

.container .check::before {
  display: block;
  position: relative;
    content: '';
  border-radius: 100%;
  height: 11px;
  width: 11px;
  top: 2px;
    left: 0px;
  margin: auto;
    transition: background 0.25s linear;
    -webkit-transition: background 0.25s linear;
}

input[type=radio]:checked ~ .check::before{
  background: #333E54;
}

我能得到这个：

唯一的问题是我无法点击以处理伪单选按钮本身。我需要点击标签。原因是因为在我的例子中，标签没有延伸到“.check”div。我应该为我的标签提供什么样式以使其覆盖 div？如果您想查看完整的 html 和 css，here 是。

Answer 1

这应该有效：

我稍微编辑了 .container label 样式，将其向左移动一点，使其位于复选框图像上方。

.container{
  float:left;
  position:relative;
  margin-right:20px;
}

.container input[type=radio]{
  position: absolute;
  visibility: hidden;
}

.container label{
  display: block;
  position: ;
  font-weight: 300;
  font-size: 1.2em;
  height: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
      margin: 10px auto 10px -26px;
    padding: 25px 25px 25px 36px;
    position: relative;
}
.container:hover label{
    color: #485776;
}

.container:hover .check{
    border-color: #485776;
}

.container:hover .check::border{
    background-color: #485776;
}
.container .check{
  display: block;
  position: relative;
  border: 4px solid #333E54;
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: -67px;
  left: -25px;
    z-index: 5;
    transition: border .25s linear;
    -webkit-transition: border .25s linear;  
}

.container .check::before {
  display: block;
  position: relative;
    content: '';
  border-radius: 100%;
  height: 11px;
  width: 11px;
  top: 2px;
    left: 0px;
  margin: auto;
    transition: background 0.25s linear;
    -webkit-transition: background 0.25s linear;
}

input[type=radio]:checked ~ .check::before{
  background: #333E54;
}

<div style="margin-left:30px;">
  <div class='container'>
<input type="radio" id="rdArts" name="itemcat">
    <label for="rdArts">Arts</label>    
    <div class="check"></div>
</div>

<div class='container'>
    <input type="radio" id="rdElectronics" name="itemcat">
    <label for="rdElectronics">Electronics</label>

    <div class="check"></div>
</div>

<div class='container'>
    <input type="radio" id="rdCars" name="itemcat">
    <label for="rdCars">Cars</label>

    <div class="check"></div>
</div>
  </div>

如何在自定义 div 上拉伸标签以实现单选按钮点击

How to stretch label over a custom div to achieve radio button click

css

label

radio-button