我不知道如何实现单选按钮和复选框,如图像参考中所示?

时间:2016-08-25 12:02:57

标签: html5 css3

我不知道如何实现这样的单选按钮和复选框:enter image description here

我已经开始这么做了,但它没有点击单选按钮。请告诉我如何实现这些单选按钮和复选框组件。

input[type=radio] {
  color: #6f7478;
  opacity: 0.6;
  width: 18px;
  height: 18px;
}
input[type=radio]:checked {
  background: #0DFF92;
  border: 5px solid #0DFF92;
}
<input type="radio" value="" />

2 个答案:

答案 0 :(得分:0)

试试这个。该按钮是可点击的。

 <html>
     <style>  
        input[type=radio] {
        color: #6f7478;
        opacity:0.6;
        width:18px;
        height:18px;
        }
        input[type=radio]:checked {
        background: #0DFF92;
        border: 5px solid #0DFF92;
        }
    </style>

     Radio: <input type="radio" id="rd">
  </html>

答案 1 :(得分:0)

尝试以下内容,

.radio input[type=radio] {
  display: none;
}
.radio span {
  border: 1px solid #ddd;
  display: inline-block;
  padding: 5px 10px;
  position: relative;
}
.radio span:hover {
  border: 1px solid blue;
  cursor: pointer;
}
.radio input:checked+span {
  border: 1px solid blue;
}
.radio input:checked+span:after {
  content: '';
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-bottom: 10px solid blue;
  position: absolute;
  bottom: 0;
}
<label class="radio">
  <input type="radio" name='radioBtn' />
  <span>Radio button 1</span>
</label>
<label class="radio">
  <input type="radio" name='radioBtn' />
  <span>Radio button 2</span>
</label>