Question

可能重复：
Checkbox size

我正试图在大多数现代浏览器（FF10，Chrome，IE9 +）中显示更大的复选框

我尝试设置宽度/高度，但仅适用于FF，而不适用于Chrome或IE。

有什么建议吗？

Answer 1

您可以将transform样式与scale函数一起使用。见http://jsfiddle.net/kwEK6/

这适用于许多浏览器，但当然不是全部......

Answer 2

或者您可以尝试：

height: 30px; 
line-height: 30px; //line-height is same with height make your text is middle.
font-size: 13px; // It's up to you
padding: 10px; // It's up to you

Answer 3

您可以这样做：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
  <style> 
    .ccs3fl input[type='checkbox'],.ccs3fl input[type='radio'] 
     { 
                filter: alpha(opacity=0); 
                -moz-opacity: 0; 
                -webkit-opacity: 0; 
                opacity: 0; 
                position:absolute; 
                cursor: hand; 
                cursor: pointer; 
     } 
    .ccs3fl input[type='checkbox']+::after,.ccs3fl input[type='radio']+::after 
     { 
                font-wight:bold; 
                border: solid 1px #D9D9D9; 
                border-radius: 3px; 
                vertical-align: middle; 
                content:'\2714'; 
                color:#FFFFFF; 
                background:#FFFFFF; 
     } 
    .ccs3fl input[type='checkbox']:checked+::after ,.ccs3fl input[type='radio']:checked+::after {color:#6599FF;} 
    .ccs3fl input[type='radio']+::after {content:'\25CF';padding:0 3px;} 
    </style></head><body> 

    <form class='ccs3fl'> 
    <input type=checkbox><b></b> My Custom Checkbox
    </form></body></html>

通知：

<b></b>

复选框末尾的

- 每个收音机/复选框后面应放置一个空元素，以使其能够正常工作

有没有办法让复选框html控件显示更大，也许用CSS？

3 个答案: