zoukankan      html  css  js  c++  java
  • ZH奶酪:利用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 */
    }
  • 相关阅读:
    JDBC操作MySQL
    MySQL-SQL语句
    MySQL-环境安装、配置、卸载、系统介绍
    JavaSE-单元测试、反射、注解
    JavaSE-Stream、方法引用
    JavaSE-函数式编程接口
    JavaSE-网络编程
    Document
    Document
    Document
  • 原文地址:https://www.cnblogs.com/CheeseZH/p/4643798.html
Copyright © 2011-2022 走看看