頭の中は異空間

ものづくり中心

JSっぽい挙動をCSSだけで表現 - チェックボックス、ラジオボタン

HTML CSS

HTMLとCSSのみで便利な挙動と見た目を作ってみました。

 

比較的よく使うフォームの一部をCSSで装飾してやることによって、よりスタイリッシュさを出します。大事なことは、JSを一切利用していないこと。つまり、バグで動作しないリスクがないということです。

JSを使わない代わりに、CSS3の新擬似スタイルのfirst(last)-of-typeとか-webkit-filterなどを駆使して、なるべくJSの挙動に近づけます。もちろん、見た目だけでなくクリックした場合には実際にクリックされています。

 

 

チェックボックス

クリックした場合、クリック状態が維持される。また、クリック中とマウスオーバー時には色を変える(アニメーション)

code

・HTML
<div class="checkbox">
  <input name="test1" class="nobutton" id="test1" type="checkbox">
  <label for="test1">チェック1</label>
  <input name="test2" class="nobutton" id="test2" type="checkbox">
  <label for="test2">チェック2</label>
</div>

・CSS
.checkbox, .radio {
    margin-top: 20px;
}
input[type="checkbox"].nobutton {
    display: none;
}
.checkbox label {
    padding: 10px;
    opacity: 0.7;
    background: rgb(0, 240, 240);
    box-shadow: 3px 3px rgba(0, 0, 0, 0.7);
    border-radius: 3px;
    transition-property: background;
    transition-duration: .4s;
    cursor: pointer;
}

.checkbox label:hover {
    background: rgb(240, 240, 0);
}

input[type="checkbox"]:checked + label {
    background: rgb(240, 240, 0);
}

 

ラジオボタン

 クリックした場合、クリック状態が維持される。また、クリック中には色を変える。ここでは、-webkit-filter: brightness(XX%)を利用。ただし-webkit-filterを利用しているので、FFなど一部のブラウザでは正しく動作しないことがある。

code

・HTML
<div class="radio">
  <input id="test3" class="nobutton" name="radiotest" type="radio" />
  <label for="test3">radio1</label>
  <input id="test4" class="nobutton" name="radiotest" type="radio" />
  <label for="test4">radio2</label>
</div>

・CSS
input[type="radio"].nobutton {
    display: none;
}
.radio label {
    padding: 10px;
    display: block;
    float: left;
    opacity: 0.7;
    background: rgb(0, 240, 0);
    cursor: pointer;
}
.radio label:first-of-type {
    border-radius: 17px 0px 0px 17px;
}
.radio label:last-of-type {
    border-radius: 0px 17px 17px 0px;
}
radio label:hover {
    background: rgb(0, 240, 0);
    -webkit-filter: brightness(70%);
}
input[type="radio"]:checked + label {
    -webkit-filter: brightness(70%);
}

 

 

総括

この2つを実現するためのポイントとしては、元のformをdisplay: none;で見えなくして、代わりにlabelにpaddingとかbox-shadowとかborder-radiusをつけてそれっぽく見せてやること。

同じことをaタグボタン化に対しても出来ます。ただし、どのタグにどのスタイルを当てることが出来るのかは異なるので、うまく動作しない、と思ったらまずはググってみるのがいいですね。

 

挙動をJSで書くのは簡単ですが、それだと要素そのもの、もしくはinputの種類などその分書いてやらないといけなくてやたらとコード量が増すのと、何よりバグが出やすくなるのとメンテも大変になります。

JSを使うなら、JSならではの挙動、例えばAjaxやcanvas, モーダルウィンドウなどの必要な箇所に限定して使うのが正しい気がします。

それでも、サイトが大規模化していくに連れてどうしてもコード量は増えるのですがｗ