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で使用する文字コードはこちら
結果
スポンサードリンク
コメントを書き込む