有没有办法让复选框HTML控件显示得更大一些，可以用CSS实现吗？

14 浏览
0 Comments

有没有办法让复选框HTML控件显示得更大一些，可以用CSS实现吗？

可能是重复问题：

复选框尺寸

我试图在大多数现代浏览器（FF10，Chrome，IE9+）中使一些复选框显示得更大。

我尝试设置宽度/高度，但只在FF中有效，而在Chrome和IE中无效。

有什么建议吗？

0

3 答案

0 Comments

问题的原因是想要通过CSS样式来改变复选框（checkbox）的显示大小，但默认情况下无法直接通过CSS样式来修改复选框的大小。解决方法是使用一些特殊的CSS样式和HTML结构来实现自定义的复选框。

具体的解决方法如下：

1. 首先，在HTML文档的标签中添加以下CSS样式：

2. 在标签中，使用

标签创建一个表单，并为该表单添加一个class属性，值为'ccs3fl'：


     My Custom Checkbox

3. 在复选框的后面添加一个空的元素，可以使用标签来实现：

 My Custom Checkbox

通过以上的CSS样式和HTML结构，可以实现自定义的复选框显示效果，其中复选框选中状态下的显示效果为白色勾号在蓝色背景中，未选中状态下的显示效果为白色方框在白色背景中。

需要注意的是，在复选框的末尾添加了一个空的元素，这是为了使上述样式能够正常工作。

0
0 Comments

问题的出现原因是想要通过CSS样式使复选框（checkbox）的显示变大，但是默认情况下复选框的大小是固定的。为了解决这个问题，可以使用以下CSS样式来调整复选框的大小：

height: 30px; 
line-height: 30px; //line-height与height相同，使得文字居中显示
font-size: 13px; //字体大小根据需要进行调整
padding: 10px; //根据需要进行调整

0
0 Comments

问题的出现原因是在Chrome浏览器的版本18上，使用transform和scale函数对复选框进行样式调整没有效果。

解决方法是使用zoom属性来对复选框进行样式调整，该方法在IE浏览器上有效。对于其他浏览器，可以使用-webkit-transform和scale函数来进行样式调整。

以下是使用zoom属性和-webkit-transform函数对复选框进行样式调整的代码示例：

通过以上方法，可以使复选框的显示变大。

0