ストック / チェックボックをいい感じにするCSS
ブログを更新しました。元の記事はコチラ
変えたいけど変えるとなると結構めんどくさいチェックボックスのスタイリング。。。
また使いそうだからメモしておきます。結構なやんだ。
こんな感じです。
実際にはこのくらいの大きさ。
Sassなんで変数かえればお好みの大きさになるかと思います。
.scssファイル
$checkbox_height: 22px;
$checkbox_margin: 25px;
$c_white: #fff;
$c_gray: #eee;
$c_navy: #002b53;
.nice-checkbox {
/* hide checkbox */
input[type=checkbox] {
visibility: hidden;
}
float: left;
margin: 0 7px 7px 0;
position: relative;
label {
display: inline-block;
height: $checkbox_height;
background-color: $c_white;
border: 1px solid $c_gray;
border-radius: 2px;
cursor: pointer;
/* Checkbox text style */
position: relative;
margin-left: - $checkbox_margin;
padding: 0 7px 0 22px;
font-size: 12px;
color: $c_navy;
line-height: $checkbox_height;
}
/* Tick mark */
label:after {
content: "";
opacity: 0.2;
width: 9px;
height: 5px;
background: transparent;
border: 3px solid $c_navy;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
position: absolute;
top: $checkbox_height/5;
left: 6px;
}
/* Hover state */
label:hover:after {
opacity: 0.5;
}
input[type=checkbox]:checked + label:after {
opacity: 1;
border-color: $c_white;
}
input[type=checkbox]:checked + label {
background-color: $c_navy;
color: $c_white;
border-radius: 3px;
font-weight: bold;
}
}
たくさんあるチェックボックスをタグのように並べる時にいいかもね。
ブラウザチェックしてません。
確認したのはChromeだけなので使うときはテストをお忘れなく。
Author And Source
この問題について(ストック / チェックボックをいい感じにするCSS), 我々は、より多くの情報をここで見つけました https://qiita.com/shunwitter/items/35ff045a39ce9455106a著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .