0

我使用以下代码在复选框上获得圆角

input[type=checkbox]{
    -webkit-appearance: none;
    background-color: #fafafa;
    border: 1px solid #cacece;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
       -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
            box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    -webkit-border-radius: 4px;
     -khtml-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px
    display: inline-block;
    position: relative;
    height: 15px;
    width: 15px;
    padding-right: 16px;
    padding-bottom: 13px;
}

但它在 Mozilla 中不起作用。你能给我一些代码吗？

4

2 回答 2

1

这篇文章很旧，但这是我的建议：

将标签与您的复选框相关联，如下所示：

<input type="checkbox" value="1" id="c1" />
<label class="check" for="c1"></label>

通过 CSS 隐藏您的复选框：

.checkboxes input[type=checkbox]{
    display:none
}

根据需要设置标签样式。我创建了一个简单的 jsfiddle，它充分展示了如何使用个性化复选框。在我的示例中，我将它们保持为正方形，但您可以在 css 中轻松添加边框半径。

这是jsfiddle

于 2013-09-24T20:47:33.850 回答
0

复选框（单选按钮和选择）是特定于操作系统的，并且由操作系统而不是浏览器生成。对这些元素进行样式设置的能力一直非常有限。

于 2012-11-27T15:54:45.890 回答