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 */
}
ZH奶酪:利用CSS将checkbox选项放大的更多相关文章
- ZH奶酪:AngularJS判断checkbox/复选框是否选中并实时显示
最近做了一个选择标签的功能,把一些标签展示给用户,用户选择自己喜欢的标签,就类似我们在购物网站看到的那种过滤标签似的: 简单的效果如图所示: 首先看一下html代码: <!DOCTYPE htm ...
- ZH奶酪:CSS中限制span显示字数
span中的文字是取出于数据库的,不确定文字的个数,由于排版的原因只想让span不超过6个字,如果超过只显示六个,当鼠标悬浮上去的时候tip显示全部内容 Step1.在span中添加title < ...
- 纯css实现checkbox开关切换按钮
我们都知道 checkbox 标签默认样式 实在是太low了,故对CheckBox美化很有必要. 现提供两种方式对其进行美化. 方法一 <div class="switch-wrap ...
- 利用CSS制作背景变色的横向导航栏
1.表单 页面如下: <html> <head> <title>注册表单页面</title> </head> <body> &l ...
- 利用CSS实现带相同间隔地无缝滚动动画
说明:因为在移动上主要利用CSS来做动画,所以没有考虑其他浏览器的兼容性,只有-webkit这个前缀,如果需要其他浏览器,请自行补齐. 首先解释一下什么是无缝滚动动画, 例如下面的例子 See the ...
- 如何利用CSS代码使图片和文字在同一行显示且对齐
对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...
- Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行
H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...
- 利用css新属性appearance优化select下拉框
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 利用css的border实现画三角形思路原理
1.利用Css 的border绘制三角形的原理: div的border是有宽度和颜色的,当div的宽度比较大的时候,比如上面代码每个边100像素,颜色又不一样,浏览器怎么渲染颜色呢?经测试发现,宽度较 ...
随机推荐
- Java Calendar,Date,DateFormat,TimeZone,Locale等时间相关内容的认知和使用(5) SimpleDateFormat
本章介绍SimpleDateFormat. SimpleDateFormat 介绍 SimpleDateFormat 是一个格式化Date 以及 解析日期字符串 的工具.它的最常用途是,能够按照指定的 ...
- IOS文件系统及其相关操作(NSFileManager,NSFileHandle)
How do you get the paths to these special sandbox directories? NSArray *NSSearchPathForDirectoriesIn ...
- Js与正则表达式
原本接着上面的章节,这一章节应该是写 Jquery事件的,由工作需要,暂时横插一篇正则表达式的学习,这里是边学边记录,错误之处,希望指正,提拔一二,不甚感激! 此章节有 1.1 正则表达式的定义 1. ...
- Universal-Image-Loader解析(二)——DisplayImageOptions的详细配置与简单的图片加载
在使用这个框架的时候,我们必须要配置一个DisplayImageOptions对象来作为ImageLoader.getInstance().displayImage()中的参数,所以很有必要讲解这个对 ...
- Java比较两个Date日期的大小
import java.util.*; import java.text.ParseException; import java.text.SimpleDateFormat; class Test{ ...
- Leetcode刷题记录:编码并解码短网址
题目要求 编写一个类,提供两个方法.一个可以将普通的网址编码成短网址,一个可以将短网址还原为普通网址. 参考题解 # 使用随机函数,生成短网址,保存在dict中,避免重复 import random ...
- 深入理解VMware虚拟机网络通信原理
VMware虚拟机的上网方式有三种:NAT.桥接.仅主机模式,本篇介绍桥接模式和NAT模式. 1.实验环境 博主的实验环境如下: 宿主机操作系统:Windows 7 VMware Workstatio ...
- Bias(偏差),Error(误差),和Variance(方差)的区别和联系
准: bias描述的是根据样本拟合出的模型的输出预测结果的期望与样本真实结果的差距,简单讲,就是在样本上拟合的好不好.要想在bias上表现好,low bias,就得复杂化模型,增加模型的参数,但这样容 ...
- HTTP Error 502.5 – Process Failure
https://www.cnblogs.com/lookerblue/p/7101641.html http://www.cnblogs.com/lookerblue/p/7102040.html h ...
- Hadoop2.6.0版本号MapReudce演示样例之WordCount(一)
一.准备測试数据 1.在本地Linux系统/var/lib/hadoop-hdfs/file/路径下准备两个文件file1.txt和file2.txt,文件列表及各自内容例如以下图所看到的: wate ...