重複の可能性:
チェックボックスのサイズ
最近のほとんどのブラウザー (FF10、Chrome、IE9+) でいくつかのチェックボックスを大きく表示しようとしています。
幅/高さを設定しようとしましたが、それは FF でのみ機能し、Chrome や IE では機能しません。
助言がありますか?
重複の可能性:
チェックボックスのサイズ
最近のほとんどのブラウザー (FF10、Chrome、IE9+) でいくつかのチェックボックスを大きく表示しようとしています。
幅/高さを設定しようとしましたが、それは FF でのみ機能し、Chrome や IE では機能しません。
助言がありますか?
transform
関数でスタイルを使用できますscale
。http://jsfiddle.net/kwEK6/を参照してください
これは多くのブラウザで機能しますが、もちろん、すべてではありません...
次のようなことができます。
<!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>
チェックボックスの最後 - これが適切に機能するためには、各ラジオ/チェックボックスの後に空の要素を配置する必要があります
または、次を試すことができます。
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