Question

你好，我在表格中有一个按钮

<tr>
    <td class="style2">
        gender
    </td>
    <td>
        <input id="male" type="radio" checked="checked"/>m
        <input id="female" type=radio />f
    </td>
</tr>

我想为这样的单选按钮添加边框：

$("document").ready(function(){
    $("form :input").css("border", "3px solid red");
    $("form :radio").css("border", "3px solid red");
});

它不起作用，单选按钮不在边框

Answer 1

http://css-tricks.com/snippets/css/custom-radio-buttons/

这是一篇文章，其中介绍了如何自定义单选按钮。只用纯CSS就无法真正达到你想要的效果。

您必须创建图像（已选中和未选中状态）并使用上述代码创建自定义单选按钮

这是另一种方法：

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

修改

如果您希望边框为方形边框，而不是圆形按钮周围的边框，请参阅Nathan Byers的以下答案。

Answer 2

您还可以在输入元素周围使用span元素。如果您只想要单选按钮，请使用以下内容：

<table>
    <tr>
        <td class="style2">gender
        </td>
        <td>
            <span class="redBorder">
                <input id="male" type="radio" checked="checked" />
            </span>
                m

            <span class="redBorder">
                <input id="faemale" type="radio" />
            </span>
                f
        </td>
    </tr>
</table> 

<script>
$("document").ready(function () {
    $(".redBorder").css("border", "3px solid red");
});
</script>

jquery表单选择器radiobutton和复选框

2 个答案: