ZH奶酪:利用CSS将checkbox选项放大
2015-07-13 20:04
806 查看
在Hybrid App开发过程中,html中默认的checkbox选项在手机屏幕上显得比较小,app不能像web page那样放大缩小,所以要通过CSS将checkbox选项放大:
例如HTML代码:
CSS放大checkbox方法一(仅IE):
CSS放大checkbox方法二(CSS transform通用):
两个方法都可以达到将checkbox放大的目的;
方法1很简单,利用zoom就是将整个控制项放大,不过有可能导致排版问题(因为zoom是IE浏览器中的东东,所以其他浏览器不支持);
方法2比较常用,稍微复杂一点,但是不会导致排版问题。
CSS3 transform属性
W3school CSS3 transform教程:http://www.w3school.com.cn/cssref/pr_transform.asp
完整CSS3教程:http://www.w3school.com.cn/css3/index.asp
transform 属性向元素应用 [b]2D(点我)[/b] 或 3D(点我) 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
例如这个演示地址
旋转div元素
例如HTML代码:
<input type="checkbox" /><span>复选框</span>
CSS放大checkbox方法一(仅IE):
input[type=checkbox] { zoom: 200%; }
CSS放大checkbox方法二(CSS transform通用):
input[type=checkbox] { -ms-transform: scale(2); /* IE */ -moz-transform: scale(2); /* FireFox */ -webkit-transform: scale(2); /* Safari and Chrome */ -o-transform: scale(2); /* Opera */ }
两个方法都可以达到将checkbox放大的目的;
方法1很简单,利用zoom就是将整个控制项放大,不过有可能导致排版问题(因为zoom是IE浏览器中的东东,所以其他浏览器不支持);
方法2比较常用,稍微复杂一点,但是不会导致排版问题。
CSS3 transform属性
W3school CSS3 transform教程:http://www.w3school.com.cn/cssref/pr_transform.asp
完整CSS3教程:http://www.w3school.com.cn/css3/index.asp
transform 属性向元素应用 [b]2D(点我)[/b] 或 3D(点我) 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
例如这个演示地址
旋转div元素
div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari 和 Chrome */ -o-transform:rotate(7deg); /* Opera */ }
相关文章推荐
- css硬件加速
- 你可能没注意的CSS单位
- css3 背景记
- gridview表头固定(经验篇)
- CSS3学习(六)盒子、背景、边框新样式
- CSS3学习(五)字体相关样式
- CSS3学习(四)选择器详解
- CSS3学习(三)动画使用总结
- css中的关于margin-top,position和z-index的一些bug解决方案
- css的文本样式属性
- 如何用css3做全屏切换效果
- div+css进度条
- CSS的布局属性
- css3动画效果
- css hack
- 不解释,分享这个base.css
- 解决grunt-contrib-cssmin压缩默认会删除一些css hack的问题
- CSS的盒模型属性总结
- CSS3动画遮罩文字特效
- css3 边框记