2

可能重复：
复选框大小

我正在尝试使某些复选框在大多数现代浏览器（FF10、Chrome、IE9+）中显示得更大

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

有什么建议么？

4

3 回答 3

4

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

这适用于许多浏览器，但当然，并非所有...

于 2012-04-25T14:14:26.440 回答
0

或者您可以尝试：

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
于 2012-04-25T14:48:10.740 回答
0

你可以这样做：

<!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>

在复选框的末尾 - 应该在每个单选框/复选框之后放置一个空元素，以使其正常工作

于 2012-09-04T19:41:22.533 回答