复选框列表样式

Question

我的列表框在Chrome，Firefox和IE中的显示方式不同。

我怎样才能让它们看起来很像。我想要1px边框

 <asp:CheckBoxList ID="cbStatus" runat="server" RepeatColumns="4">
                        <asp:ListItem Text="Approved" Value="A"></asp:ListItem>

                        <asp:ListItem Text="Declined" Value="D"></asp:ListItem>

                    </asp:CheckBoxList>

Answer 1

Checkbox是不同浏览器总是会有不同呈现方式的元素之一。如果你想让外观统一，我建议使用一个jQuery插件，将普通的复选框变成样式控件。

例如，您的checkboxlist将此HTML呈现给浏览器：

<table id="cbStatus" border="0">
    <tr>
        <td><input id="cbStatus_0" type="checkbox" name="cbStatus$0" /><label for="cbStatus_0">Approved</label></td>
        <td><input id="cbStatus_1" type="checkbox" name="cbStatus$1" /><label for="cbStatus_1">Approved w/ Requirements</label></td>
        <td><input id="cbStatus_2" type="checkbox" name="cbStatus$2" /><label for="cbStatus_2">Declined</label></td><td></td>
    </tr>
</table>

使用PrettyCheckable插件，您可以发出一个命令来设置样式::

$('input[type="checkbox"]').prettyCheckable();

以下是它的样子：http://jsfiddle.net/WuFg9/

您可以根据需要调整样式，边框，颜色等等。