利用CSS将checkbox选项放大

简介:

在Hybrid App开发过程中,html中默认的checkbox选项在手机屏幕上显得比较小,app不能像web page那样放大缩小,所以要通过CSS将checkbox选项放大:

例如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 属性向元素应用 2D(点我) 或 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 */
}
复制代码

 


本文转自ZH奶酪博客园博客,原文链接:http://www.cnblogs.com/CheeseZH/p/4643798.html,如需转载请自行联系原作者

相关文章
|
27天前
|
前端开发
视觉冲击:CSS实现相册图片的放大效果,让网站首页更震撼!
视觉冲击:CSS实现相册图片的放大效果,让网站首页更震撼!
|
1月前
|
前端开发
CSS——通过CSS实现展示更多选项和收起
CSS——通过CSS实现展示更多选项和收起
23 0
|
2月前
|
前端开发 C++
css 鼠标悬浮显示放大图片 vs 鼠标点击显示放大图片
css 鼠标悬浮显示放大图片 vs 鼠标点击显示放大图片
30 0
|
2月前
|
前端开发
前端 CSS 经典:图层放大的 hover 效果
前端 CSS 经典:图层放大的 hover 效果
28 0
|
10月前
|
前端开发
CSS实现鼠标悬停图片向上浮动,放大,翻转
CSS实现鼠标悬停图片向上浮动,放大,翻转
252 0
|
12月前
|
前端开发 开发者
|
10月前
CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)
CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)
|
前端开发
css3 效果全(旋转,放大,倾斜,平移)
css3 效果全(旋转,放大,倾斜,平移)
98 0