我已经开始这么做了,但它没有点击单选按钮。请告诉我如何实现这些单选按钮和复选框组件。
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="" />
答案 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>