3
我想弄清楚如何使用CSS来以同样的方式替换我所有的单选按钮。无论输入的位置在哪里，是否可以使用css来使这些单选按钮正常工作？我不想要调整行或任何东西。只需抓住单选按钮并按照我在下面的示例中的方式进行操作即可。单选按钮CSS
body {
background-color: white;
margin: 0;
padding: 0;
}
input[type='radio'] {
display: none;
}
.radio {
border: 1px solid #b3b4b4;
border-radius: 50%;
box-sizing: border-box;
cursor: pointer;
display: block;
float: left;
height: 16px;
margin: 10px 10px 0 0;
padding: 10px;
position: relative;
width: 16px;
}
.row:hover .radio {
border: 2px solid #218996;
}
input[type='radio']:checked + .radio {
background-color: #218996;
border: 2px solid #218996;
}
input[type='radio']:checked + .radio::before {
content: "✓ ";
position: absolute;
color: white;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size:
}
.row {
border-bottom: 1px solid #dcdcdc;
padding: 0 5px;
}
.row label {
display: inline-block;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
}
.row > label:last-child {
padding: 12px 0;
width: calc(100% - 50px);
cursor: pointer;
}<form name="titleTypes" id="titleTypes" method="post" action="process.cfm">
<div>
<!---Label is here for placement of error message--->
<label for="rgroup" class="error" style="display:none;">Please choose one.</label>
</div>
<div class='row'>
<input id="one" type="radio" name="rgroup" value="MV/titleTypeMV.cfm" />
<label for="one" class='radio' tabindex='1'></label>
<label for="one">MOTOR VEHICLE/TRAVEL TRAILER TITLE</label>
</div>
<div class='row'>
<input id="two" type="radio" name="rgroup" value="MH/mobileHome.cfm" />
<label for="two" class='radio' tabindex='1'></label>
<label for="two">MOBILE HOME</label>
</div>
<div class='row'>
<input id="three" type="radio" name="rgroup" value="BOAT/boat.cfm" />
<label for="three" class='radio' tabindex='1'></label>
<label for="three">VESSEL</label>
</div>
<div class='row'>
<input id="four" type="radio" name="rgroup" value="DUPL/duplicate.cfm" />
<label for="four" class='radio' tabindex='1'></label>
<label for="four">DUPLICATE</label>
</div>
<div>
<button class="btn-u" type="submit" name="submit" id="submitBtn" class="submitBtn"><i></i>Next</button>
</div>我想输入无线电能够公正是否有在桌子上或任何地方只是通过调用类工作完全因为这些单选按钮。这可能吗？
是的，这是可能的。你有什么样的例子，所以我们可以告诉你如何做到这一点？ –
我发布了上面的CSS作为我想要的例子 –
我希望单选按钮在我的例子中像上面那样工作，但在任何地方工作。如果您尝试在表格中使用上述内容，则会打破单选按钮。试图看看我可以如何通用 –