有时候默认复选框的太小,需要加大。用此法<input type="checkbox" style="width:px;">,很多浏览器不兼容,无法实现。有以下3法。
1.zoom
原理是将元素放大或缩小。
缺点:若与其它元素同在一行上,会出现其它元素也放大。
input[type="radio"],input[type="checkbox"]{ zoom:180%; }
2.transform CSS属性的scale函数
input[type="checkbox"] { /*Double-sized Checkboxes*/ transform: scale(2);/*FF 16+, IE 10+*/ -webkit-transform: scale(2); /* Chrome, Safari 3.5+, Opera 15+*/ -ms-transform: scale(2);/*legacy: IE 9+*/ -moz-transform: scale(2);/*legacy: FF 3.5+*/ -o-transform: scale(2);/*legacy: Opera 10.5*/ }
3.手工制作
制作一个叠加div,它位于复选框的正上方并使其可见。使用此叠加层,可以添加自己的复选框图形,并在用户单击图像时更改其图像(=它的可见值)。此外,必须手动更新真实复选框的值,以确保可以发送包含复选框表单值的表单。 这种技术经常被像QooxDoo,ExtJS等RIA框架使用。