之前做项目的时候,遇到需要使用input[type="radio]的情景
接到个需求,需要放大input的小圆圈
但是,我使用width或者height调的时候,没有变大小圆圈
在百度找了很多资料,都是使用另类的方法,例如label标签或图片
后来想了半天,也许能用zoom试试
行吧,说到这里,怎么能不献上代码和效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="radio">
</body>
</html>
效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="radio" style="zoom:4;">
</body>
</html>
效果图
zoom的介绍
zoom
语法:
zoom:normal | <number> | <percentage>
默认值:normal
适用于:所有元素
继承性:有
动画性:是
计算值:绝对长度
取值:
- normal:
- 使用对象的实际尺寸。
- <number>:
- 用浮点数来定义缩放比例。不允许负值
- <percentage>:
- 用百分比来定义缩放比例。不允许负值