コニファ・ロゴ

csstest:[CSS]派手な色で目立つチェックボックスとラジオボタン

各種フォームで通常の色のままでは目立たないチェックボックスとラジオボタンに派手な色をつけて主張させます。また、入力する項目毎に色分けして明確にすることもできます。
チェックボックスとラジオボタンの両者とも本来のアピアランスのままでは色がつけられないので、これを消して、:before、:afterの疑似要素を使って新たに描き直しています。色を変えるときは、class名を無し(デフォルト)、blue、red、orange、violetのそれぞれにするだけです。

なお、オリジナルは、チェックボックスに「indeterminate(不明確)」という状態が付いていましたが、このことのためだけにjQueryを使用するため外しています。また、色数はひとつ(紫色)増やしています。
タイプ Checkbox Radio
緑色(デフォルト)
青色
赤色
黄色(薄いオレンジ色)
紫色

サンプルのhtmlソース(青色のそれぞれの部分のみ)

  /*-- checkbox --*/
  <input class="blue" type="checkbox">
  <input class="blue" type="checkbox">
  <input class="blue" type="checkbox" checked>
  /*-- radio --*/
  <input class="blue" type="radio" name="group2">
  <input class="blue" type="radio" name="group2" checked>
  <input class="blue" type="radio" name="group2">

サンプルのCSSソース

input[type=checkbox],input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    height: 20px;
    width: 20px;
    vertical-align: -0.8rem;
    transition:all .15s ease-out 0s;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin: .4rem;
    outline: none;
    border-radius: 10%;
}
/* Checkbox */
input[type=checkbox]:before,input[type=checkbox]:after {
    position: absolute;
    content: "";
    background: #fff;
    transition: all .2s ease-in-out;
}
input[type=checkbox]:before {
    left: 2px;
    top: 6px;
    width: 0;
    height: 2px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}
input[type=checkbox]:after {
    right: 9px;
    bottom: 3px;
    width: 2px;
    height: 0;
    transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    transition-delay: .2s;
}
input[type=checkbox]:checked:before {
    left: 1px;
    top: 10px;
    width: 6px;
    height: 2px;
}
input[type=checkbox]:checked:after {
    right: 5px;
    bottom: 1px;
    width: 2px;
    height: 14px;
}
input[type=checkbox]:indeterminate:before,input[type=checkbox]:indeterminate:after {
    width: 7px;
    height: 2px;
    transform: rotate(0);
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
}
input[type=checkbox]:indeterminate:before {
    left: 1px;
    top: 7px;
}
input[type=checkbox]:indeterminate:after {
    right: 1px;
    bottom: 7px;
}
/* Radio */
input[type=radio] {
    border-radius: 50%;
}
input[type=radio]:checked:before {
    transform: scale(1);
}
input[type=radio]:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 3px;
    transform: scale(0);
    transition: all ease-out 250ms;
}
/* 色は青色のみ */
input[type=checkbox].blue,input[type=radio].blue {
    border: 2px solid #2196f3;
}
input[type=checkbox].blue:checked,input[type=checkbox].blue:indeterminate,input[type=radio].blue:checked:before {
    background: #2196f3;
}

 

引用と参考;https://codepen.io/AlexTorresSk/pen/QmYEav
2018年12月現在、このurlは使われていないようです

 

戻るボタン