「CSS」transform:scale()でチェックボックスのサイズを変更する

2022年6月23日

書式
scale(sx)
scale() は CSS の関数で、二次元平面上における拡縮する変形を定義します。
transform:scale() の引数に倍率を指定します。
値sx
変倍ベクトルの横座標を表します。
変倍の量がベクトルで定義されるため、水平方向と垂直方向に対して異なる変倍で大きさを変えることができます。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
div{
  font-family: verdana;
  font-size: 20px;
  background-color:skyblue;
}
</style>
</head>
<body>
<div>
<input type="checkbox" name="chk" value="1" style="transform:scale(1.0); checked"> 東京
<input type="checkbox" name="chk" value="2" style="transform:scale(2.0);"> 東京
<input type="checkbox" name="chk" value="3" style="transform:scale(3.0);"> 東京
</div>
</body>
</html>

結果

「transform:scale()」を使用してチェックボックスのサイズを変更します。「2.0」と「3.0」を指定してチェックボックスのサイズは2倍、3倍に変更します。

CSS

Posted by arkgame

関連投稿: