之前做项目的时候,遇到需要使用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>

效果图

input[type=“radio“]大小调整_缩放比例

代码

<!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>

效果图

input[type=“radio“]大小调整_百度_02

zoom的介绍

zoom

语法:

zoom:normal | <number> | <percentage>

默认值:normal

适用于:所有元素

继承性:有

动画性:是

计算值:绝对长度

取值:


  • normal:
  • 使用对象的实际尺寸。
  • <number>:
  • 用浮点数来定义缩放比例。不允许负值
  • <percentage>:
  • 用百分比来定义缩放比例。不允许负值