在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奶酪:利用CSS将checkbox选项放大的更多相关文章

  1. ZH奶酪:AngularJS判断checkbox/复选框是否选中并实时显示

    最近做了一个选择标签的功能,把一些标签展示给用户,用户选择自己喜欢的标签,就类似我们在购物网站看到的那种过滤标签似的: 简单的效果如图所示: 首先看一下html代码: <!DOCTYPE htm ...

  2. ZH奶酪:CSS中限制span显示字数

    span中的文字是取出于数据库的,不确定文字的个数,由于排版的原因只想让span不超过6个字,如果超过只显示六个,当鼠标悬浮上去的时候tip显示全部内容 Step1.在span中添加title < ...

  3. 纯css实现checkbox开关切换按钮

    我们都知道 checkbox 标签默认样式 实在是太low了,故对CheckBox美化很有必要. 现提供两种方式对其进行美化. 方法一 <div class="switch-wrap ...

  4. 利用CSS制作背景变色的横向导航栏

    1.表单 页面如下: <html> <head> <title>注册表单页面</title> </head> <body> &l ...

  5. 利用CSS实现带相同间隔地无缝滚动动画

    说明:因为在移动上主要利用CSS来做动画,所以没有考虑其他浏览器的兼容性,只有-webkit这个前缀,如果需要其他浏览器,请自行补齐. 首先解释一下什么是无缝滚动动画, 例如下面的例子 See the ...

  6. 如何利用CSS代码使图片和文字在同一行显示且对齐

    对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...

  7. Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行

      H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...

  8. 利用css新属性appearance优化select下拉框

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. 利用css的border实现画三角形思路原理

    1.利用Css 的border绘制三角形的原理: div的border是有宽度和颜色的,当div的宽度比较大的时候,比如上面代码每个边100像素,颜色又不一样,浏览器怎么渲染颜色呢?经测试发现,宽度较 ...

随机推荐

  1. sqlite数据库实现字符串查找的方法(instr,substring,charindex替代方案)

    sqlite数据库是一款轻型的数据库,是遵守ACID的关联式数据库管理系统,资源占用低,执行效率高,可以跨平台使用,已被广泛使用.作为一款轻量级的数据库,功能自然会有所欠缺,比如数据库加密,用户权限设 ...

  2. Cocos2d-x之Schedule

    Cocos2dx的定时器 from://http://blog.linguofeng.com/archive/2012/11/14/cocos2d-x-Schedule.html 一.schedule ...

  3. EM算法与混合高斯模型

    非常早就想看看EM算法,这个算法在HMM(隐马尔科夫模型)得到非常好的应用.这个算法公式太多就手写了这部分主体部分. 好的參考博客:最大似然预计到EM,讲了详细样例通熟易懂. JerryLead博客非 ...

  4. python测试开发django-36.一对一(OneToOneField)关系查询

    前言 前面一篇在xadmin后台一个页面显示2个关联表(OneToOneField)的字段,使用inlines内联显示.本篇继续学习一对一(OneToOneField)关系的查询. 上一篇list_d ...

  5. Linux netstat命令具体解释

    简单介绍 Netstat 命令用于显示各种网络相关信息,如网络连接,路由表.接口状态 (Interface Statistics).masquerade 连接,多播成员 (Multicast Memb ...

  6. Unity动画知识之二:Animator动画状态机

    上次我们讲过Unity游戏动画从入门到住院,今天我们来讲一下动画状态机. 好了,现在我们已经成功的导入了动画.接下来要玩的东西就很装13啦.因为大部分动画师是用不到这家伙的,需要掌握这个技能的,至少也 ...

  7. unity3d 5.6烘焙教程

    unity5.6是今年发布,作为5.x的最后一个版本,有很多烘焙优势,在此总结一些作为5.x系列完结的笔记这个版本在烘焙上的特点就是增加了渐进光照贴图(Progressive Lightmapper) ...

  8. SharePoint 修改项目的new图标显示天数

    前言 最近有这么个需求,用户需要修改新建项目前面的new图标的显示天数,查了很久,发现有powershell命令或者stsadm命令可以,分享给大家. PowerShell命令 $wa = Get-S ...

  9. TrafficStats——流量统计类的范例,获取实时网速

    2.3开始android就提供来这个类的API,这样我们就可以方便的用他来实现统计手机流量来.这个类其实也很简单,我贴上他的几个方法,大家一看就知道怎么用了. static long getMobil ...

  10. libxml2 使用教程【转】

    https://blog.csdn.net/zhoudaxia/article/details/8565731# 本文整理自官方使用教程http://xmlsoft.org/tutorial/inde ...