手机单选框 css

手机单选框（Radio Button）在移动开发中扮演着重要的角色。在 Bootstrap 中，我们通过简单的 HTML 标记和 CSS 样式就能轻松地创建手机单选框。下面是一个基本的手机单选框示例，其中用到了一些常用的 CSS 样式：

div class="radio">
    label>
    input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    选项一/label>
    /div>
    div class="radio">
    label>
    input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    选项二/label>
    /div>
    div class="radio">
    label>
    input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
    选项三/label>
    /div>
    style>
.radio input[type="radio"] {
    margin-right: 5px;
}
.radio label {
    display: inline-block;
    margin-bottom: 5px;
    font-weight: normal;
    vertical-align: middle;
    cursor: pointer;
}
.radio label:hover {
    color: #333;
}
.radio input[type="radio"]:checked + label:before {
    content: "\f111";
    display: inline-block;
    margin-right: 5px;
    font: normal normal 14px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    position: relative;
    top: -2px;
}
    /style>
    

在上面的示例中，我们使用了 Bootstrap 提供的 .radio 类来样式化手机单选框。同时，我们给手机单选框的 label 添加了一些样式以及 FontAwesome 的字体图标，以更好地展示选中状态。

总体来说，Bootstrap 的手机单选框样式非常简单、易用且美观，我们只需要按照规定的 HTML 结构来书写代码，并参考官方文档中的 CSS 样式即可轻松地创建出优美的手机单选框。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！