1. TOP
  2. CSS
  3. CSSでチェックボタンを大きくする方法

CSSでチェックボタンを大きくする方法

目次

クライアントに
「チェックボックスを大きくして目立つようにしてほしい」
と言われたことはありませんか?
transform:scaleを利用して大きくする方法もあるのですが、ブラウザにより思った位置にならない、画像が粗くなってしまうなど色々と問題があるため、元からあるチェックボックスを表示しないようにして、CSSでチェックボックスのスタイルを作成する形になります。

HTML

<div class="cb">
	<input type="checkbox" id="cb" name="cb" value="1" />
	<label for="cb">テスト</label>
</div>


CSS

/* ラベル*/
.cb label {
padding-left: 25px;			/* ラベルの位置 */
font-size: 25px;
line-height: 30px;
display: inline-block;
cursor: pointer;
position: relative;
}

/* ボックス */
.cb label:before {
	content: '';
	width: 25px;			/* ボックスの横幅 */
	height: 25px;			/* ボックスの縦幅 */
	display: inline-block;
	position: absolute;
	left: 0;
	background-color: #fff;
        border: solid 2px #333;
	border-radius: 5px 5px 5px 5px;
}
/* 元のチェックボックス非表示 */
.cb input[type=checkbox] {
	display: none;
}
/* チェックした時 */
.cb input[type=checkbox]:checked + label:before {
	content: '\2713';		/* チェックの文字content CSS */ 
	font-size: 25px;			/* チェックのサイズ */
	color: #fff;			/* チェックの色 */
	background-color: #06f;			/* チェックした時の色 */
}
contentで使用する文字コードはこちら

結果

となります。 どうでしたでしょうか。


スポンサードリンク

コメントを書き込む

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。