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 */
}
时间: 2024-08-24 18:19:19

ZH奶酪:利用CSS将checkbox选项放大的相关文章

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

span中的文字是取出于数据库的,不确定文字的个数,由于排版的原因只想让span不超过6个字,如果超过只显示六个,当鼠标悬浮上去的时候tip显示全部内容 Step1.在span中添加title <span title="文字文字文字文字文字文字文字">文字文字文字文字文字文字文字</span> Step2.设置span宽度 span{ display: block; width: 120px; overflow: hidden; white-space: now

利用CSS制作静态网页的注意事项

利用CSS制作静态网页主要是在<head>里面使用外联CSS文件来赋予网页样式 首先用div分区块,了解网页布局,脑子里面有个大概的页面布局 目前学习写的几种的网页布局可以分为以下几种情况: 1.页面中间 centen ,两边留白 :直接测量 centen 内容的宽度和高度,利用 maigin:auto 让内容居中即可: 2.页面顶部 head 满页面内容 ,下面centen 居中 ,两边留白:head 宽度设为100%,中间centen 内容的宽度和高度,利用 maigin:auto 让内容

利用CSS实现居中对齐

1. 文本居中 首先编写一个简单的html代码,设置一个类名为parentDiv的div对象.html代码如下: 1 <div class="parentDiv"> 2 这里随意填写~... 3 </div> 1.1 实现文字水平居中(使用text-align) 对div.parentDiv设置text-align: center;来实现.CSS代码如下: 1 [css] 2 3 .parentDiv { 4 width:200px; 5 height:100p

利用css实现搜索过滤

无意中找到一种利用css就可实现的搜索过滤的方法,不得不说看了代码之后确实被惊艳到了,亏我之前面试还因为做这个功能做太慢而拖了后腿.在此记录下代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"&g

利用CSS、JavaScript及Ajax实现图片预加载的三大方法

原文:3 Ways to Preload Images with CSS, JavaScript, or Ajax 译文:利用CSS.JavaScript及Ajax实现图片预加载的三大方法 预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性.

利用CSS进行表单样式定义

我们在表单使用过程中,常常需要控制表单样式,如表单控件长度,显示样式,提醒背景色,甚至整个表单的字体和统一样式等. 这些其实都可以通过CSS来实现,使我们的表单看起来更漂亮,1.利用DIV控制输入控件长度:    如上图,表单姓名和出生日期字段看起来长短不一,并且太长,不美观,我们可以通过DIV的CSS样式进行调整. 上面的样式,我们可以通过在字段上加入DIV标签,并且设置DIV的样式,如长度150px,显示方式为同一行显示display: inline; 这样就实现了控件统一长度的效果: 2.

如何利用CSS实现图片的透明效果

如何利用CSS实现图片的透明效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在网页的实际应用中,往往需要设置图片的透明度,下面就简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/"

利用CSS切割图片技术来动态显示图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

如何利用CSS实现三角形效果

如何利用CSS实现三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.有时候我们经常发现有些矩形的某个地方会出现三角形效果,感觉挺神奇的,当然可以使用背景图片实现,这里简单介绍一下不采用背景图片的效果.代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&g