Question

我正在尝试使用自定义的收音机/选项按钮。它与html页面工作正常。当我尝试在模态窗口中使用相同的东西（羽毛光js模态窗口）。无法单击自定义单选按钮。普通的html单选按钮在模态窗口中工作。

任何建议/想法都会有很大的帮助请检查我的 code here, or below 单击结果窗口中的内联链接以分析问题...

<a href="http://farm5.staticflickr.com/4069/4563624740_93430bb907_b.jpg" data-featherlight>Nice image</a>

<hr>

<a href=".inline" data-featherlight>Inline</a>

<div class="inline">Hello, world<br>
<ul>
  <li>
    <input type="radio" id="f-option" name="selector">
    <label for="f-option">Pizza</label>

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

  <li>
    <input type="radio" id="s-option" name="selector">
    <label for="s-option">Boyfriend</label>

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

  <li>
    <input type="radio" id="t-option" name="selector">
    <label for="t-option">Cats</label>

    <div class="check"><div class="inside"></div></div>
  </li>
</ul>
</div>

<hr>

<h3>Gallery</h3>
<div data-featherlight-gallery data-featherlight-filter="a">
  <a href="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_b.jpg"><img src="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_q.jpg" /></a>
  <a href="http://farm5.staticflickr.com/4005/4400559493_3403152632_o.jpg"><img src="http://farm5.staticflickr.com/4005/4400559493_f652202d1b_q.jpg" /></a>
  <a href="http://farm1.staticflickr.com/174/396673914_be9d1312b1_o.jpg"><img src="http://farm1.staticflickr.com/174/396673914_be9d1312b1_q.jpg" /></a>
</div>

CSS：

.inline { display: none }

ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
    border-bottom: 1px solid #111111;
}

ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

ul li label{
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 1.35em;
  padding: 25px 25px 25px 80px;
  margin: 10px auto;
  height: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}

ul li:hover label{
    color: #ddd;
}

ul li .check{
  display: block;
  position: absolute;
  border: 5px solid #AAAAAA;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 30px;
  left: 20px;
    z-index: 5;
    transition: border .25s linear;
    -webkit-transition: border .25s linear;
}

ul li:hover .check {
  border: 5px solid #ddd;
}

ul li .check::before {
  display: block;
  position: absolute;
    content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 5px;
    left: 5px;
  margin: auto;
    transition: background 0.25s linear;
    -webkit-transition: background 0.25s linear;
}

input[type=radio]:checked ~ .check {
  border: 5px solid #0DFF92;
}

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

input[type=radio]:checked ~ label{
  color: #0DFF92;
}

Answer 1

这是你的问题

ul li input[type=radio]{
   position: absolute;
   visibility: hidden;
}

如果您将上述内容更改为：

ul li input[type=radio]{
   opacity:0;
   left:20px;
   top:30px;
   z-index:10;
}

这有效地将原始单选按钮放在自定义按钮的顶部，使其可以点击。

Jquery Featherlight js。自定义CSS单选按钮在模态窗口中不起作用

1 个答案: