oceant
oceant.qrunch.io

checkboxをCSSでスタイリング

2018/10/17に投稿
この投稿は別サイトからのクロス投稿です(クロス元:https://note.mu/oceant/n/nf18350...

デフォルトのcheckboxはdisplay: none;で隠しつつ、::beforeで四角の枠を、::afterでチェックマークを付けていきます。

radioの場合はborder-radius: 50%; で円を作れば良さそうですね。

<label>
    <input type="checkbox" value="項目値" class="check-input">
    <span class="check-span">ちぇっくぼっくす</span>
</label>
.check-input {
  display: none;
}

.check-span{
  padding-left: 37px;
  position:relative;
}

.check-span::before{
  content: "";
  display: block;
  position: absolute;
  top: -5px;
  left: 0;
  width: 25px;
  height: 25px;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f2f2f2
}

.check-input:checked + .check-span::after{
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 9px;
  width: 8px;
  height: 14px;
  transform: rotate(40deg);
  border-bottom: 3px solid #999;
  border-right: 3px solid #999;
}

関連記事

コメントはありません。
oceant
oceant.qrunch.io
佐賀の街なかに潜むWebの何でも屋。
フォロー
フォロワー
ブログを開設

クランチで技術ブログを
始めてみませんか?

この先は、クランチへのアカウント登録、及びログインが必要なページになります。

Markdownの書き方
見出し # 見出し(h1)
## 見出し(h2) , ### 見出し(h3) ...
リスト - 箇条書き
   - タブでインデント
番号付きリスト 1. テキスト
2. テキスト
改行 行末に半角スペース2つ
リンクの挿入 [タイトル](https://xxx.com)
引用 > テキスト
コード挿入 ```cpp:title
code
```
画像の挿入 ![代替テキスト](URL "タイトル")
太字 **テキスト**
斜体 *テキスト*
打消し線 ~~テキスト~~
水平線 ***
技術ブログを開設
ログイン