删除 CSS 中的“外观”后无法检查单选按钮答案

【问题标题】：Radio buttons can't be checked after removing 'appearance' in CSS删除 CSS 中的“外观”后无法检查单选按钮
【发布时间】：2018-02-12 08:01:17
【问题描述】：

我有 3 个单选按钮，它们与一个功能相关联，当每个按钮被选中时，该功能应该更改 div 内的图像。它工作正常，但是当我向它添加 CSS 样式时，实际的检查器不会对我设置的图标可见，它将显示，它使它无法检查。

注意： 当我删除 #sm-jum-btns input CSS 并且检查器实际可见代码工作时。当这些检查器被隐藏和设计时，我也需要它工作。

HTML：

<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css">
</head>

 <div class="jumbotron text-center" id="main-jum">
    <img id="jum-img" src = "https://im.whatshot.in/img/2017/Oct/churrosweb-1509092812.jpg">
 </div>

<div class="container-fluid text-center d-md-none" id="sm-jum-btns">
   <input id="radio_left" type="radio" name="optradio" onclick="changeImg()">
    <label id="btn-left"class="radio-inline sm-jum-btn ">
      <span class="fa fa-layers fa-fw fa-circle-thin">
        <i class="fa fa-circle"></i>
      </span>
    </label>

   <input id="radio_middle" type="radio" name="optradio" onclick="changeImg()">
    <label id="btn-left"class="radio-inline sm-jum-btn ">
      <span class="fa fa-layers fa-fw fa-circle-thin">
        <i class="fa fa-circle"></i>
      </span>
    </label>

   <input id="radio_right" type="radio" name="optradio" onclick="changeImg()">
    <label id="btn-left"class="radio-inline sm-jum-btn ">
      <span class="fa fa-layers fa-fw fa-circle-thin">
        <i class="fa fa-circle"></i>
      </span>
    </label>
</div>

  <script type="text/javascript">
function changeImg(){
  var jumImg = document.getElementById("jum-img");
  var radioLeft = document.getElementById("radio_left");
  var radioRight = document.getElementById("radio_right");
  var radioMiddle = document.getElementById("radio_middle");

  if (radioLeft.checked){
    jumImg.src = "https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg";
    }
  if (radioRight.checked){
    jumImg.src = "https://images7.alphacoders.com/411/thumb-1920-411820.jpg";
    }
  if (radioMiddle.checked){
    jumImg.src = "http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Wallpaper-4.jpg";
    }
  }
</script>

CSS：

#sm-jum-btns input {
      margin:0;
      padding:0;
     -webkit-appearance:none;
     -moz-appearance:none;
      appearance:none;
      margin-top: 180px;

}

#sm-jum-btn {
  position: relative;
}

.fa-circle-thin {
  color: #ffb300;
  width: 50px;
  height: 50px;
  font-size: 50px;
  font-weight: bold;
}

.fa-circle-thin::before {
  position: absolute;
  padding: 3.5px;
  margin-top:3.5px;
}

.fa-circle {
  color: #ffb300;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius:50px;
  font-size: 30px;
}

.fa-circle-thin:hover {
  color: #37100B;
}

#main-jum {
  padding: 0;
}

#main-jum img {
  width: 100%;
  min-height: 400px;
  object-fit:cover;
}

【问题讨论】：

尝试使用opacity:0; height:0; width:0;而不是appearance隐藏你的input
它也隐藏了检查器，但之后仍然无法检查它们。还有其他建议吗？

标签： javascript html css

【解决方案1】：

好的，经过两天的搜索和询问，感谢this 的回答，我弄明白了。

基本上我应该在每个label 中添加一个for 属性以将其指向它的父input id，这样它就可以实际检查input 并触发该功能。

更多关于for属性你可以找到here

【讨论】：