我已经自定义了单选按钮,它们按我的预期工作,但有一个例外。我希望该值位于单选按钮 div 内,现在它显示在我创建的单选按钮之外,这实际上是一个类 big-radio。如何在我创建的单选按钮内显示值 1 和值 2
下面是我的代码
CSS:
<style>
.ipad {
-webkit-appearance: none;
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
padding: 9px;
border-radius: 3px;
display: inline-block;
position: relative;
}
.ipad:active, .ipad:checked:active {
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
.ipad:checked {
background-color: blue;
border: 1px solid #adb8c0;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
color: #99a1a7;
}
.ipad:checked:after {
content: '\2714';
font-size: 14px;
position: absolute;
top: 0px;
left: 3px;
color: transparent;
}
.big-radio {
padding: 18px;
}
.big-radio:checked:after {
font-size: 28px;
left: 6px;
}
</style>
HTML:
<div class="button-holder">
<input type="radio" class="ipad big-radio" name="radioGroup" value="2081764"/> Value1
</div>
<div class="button-holder">
<input type="radio" class="ipad big-radio" name="radioGroup" value="2081765"/> Value 2
</div>
请在这里找到 jsfiddle:
谢谢