![eyecatch](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq1ko6SOAwXmmvSXFgLEqVYRK0NNDiT_OKD5dRbNesFH-XW-9LyQWlB4AIrx8u9n1aSKITrvdW8kiMmvVHe739Yq5KeT2as7lyPMhQHUz8ThM_pwTspD9mVJqmeUH0lkQyd4oR4co68Cs4nyo8Foe1CnHdiJWINt-uNHBa9GvTlMSywon4z_E_RsTk/s1600-rw/1617495902_0.jpg)
ブラウザごとのチェックボックスの見え方
<label><input type="checkbox" name="test_1" value="1">1</label><br>
<label><input type="checkbox" name="test_2" value="2" checked>2</label>
Google Chrome
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinFHp2X34d7Z6JbLOz7yicC0wqoAo39f2m45IoJLFbrSZDcgi1KapV7Gur2GlO3X56C23vGNR_dbZlHN1kiYv48QGxlUe8rt-u2S7nuPqeHxbVFKDPr8ib5YJbUi_WnM4HncggKQ5NtYtcC0Jsb6LGWaRfXUt2ECukyHjbp6rOoCQYWzbqYx5P1cmGEGk/s1600-rw/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99%20%2814%29.jpeg)
Safari
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHdXP0mC-qk13vnifQ1O0-u677rbCHVOmLI2VSN5va2kfbSYFe_9LKhV7DyFXx_ewJVWEgg09DjL26yOia9kt187Fc_eJMd_B0Zxkne2xaA5ZLvBRFCP8LTaF0oewrG5drH-ZGVUBCG2kedlpDMzB098awTUisUqHnOMoA26bcUcytGLcj8kKpdI2S0qA/s1600-rw/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99%20%2815%29.jpeg)
Firefox
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgltItc2mCRqVP74Fe4zrhjfcoJWeaQfs8UNflWnGpL9jCS7c9s6Me-vTwTdigpm5TuOhvoIVHN3yzI_Ki0pZtYe9dtSt9xcykbFEgni-f11Q9bzTS5K9ENZKiGDwyjCFMlCyiS0cz919s3ZcTvLQZL6stC9x6QppBlwTxvRwmt-6N7DR3SOkTT9OaaHDo/s1600-rw/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99%20%2816%29.jpeg)
iPhone
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNC_NFJtwurh-ToYMHGiNgZrTUwcPd-cydrAhvfnq1AgVAp2xjhE_nX2bJ0sUcemxImFvjo1VdUpxjYo65bRM8dHWWUpd-8fppBcUoLTjdpHk8vC-AKMjuOyxzhpcATXbEu4lePlGarX-8otG-5-946Y1Gd59ubIT9rdwEVlmIWLtI8tzjPxkTsKxnyd0/s1600-rw/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99.png)
ソースコード
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="checkbox.css">
<script src="checkbox.js"></script>
</head>
<body>
<label><input type="checkbox" name="test_1" value="1">1</label><br>
<label><input type="checkbox" name="test_2" value="2" checked>2</label>
</body>
</html>
span[type="checkbox"]{
border:2px solid orange;
position:relative;
display:inline-block;
width:32px;
height:32px;
border-radius:4px;
vertical-align:middle;
margin:4px;
cursor:pointer;
}
span[type="checkbox"][data-checked="true"]{
background-color:orange;
}
span[type="checkbox"][data-checked="true"]:before{
content:"";
display:block;
width:30%;
height:50%;
background-color:transparent;
border-color:white;
border-style:solid;
border-width : 0 4px 4px 0;
margin:5% auto 0;
transform:rotate(45deg);
}
input[type="checkbox"][data-designed="1"]{
display:none;
}
window.$$checkbox = (function(){
// labelタグに入っているcheckboxボタンの一覧を取得
let MAIN = function(){
let checks = document.querySelectorAll("label input[type='checkbox']");
if(!checks){return;}
for(let check of checks){
this.set_check_button(check);
}
};
// ラジオボタンの設定フロー
MAIN.prototype.set_check_button = function(check){
if(!check){return;}
this.make_check_button_design(check);
this.make_check_button_event(check);
};
// 表示するラジオボタンエレメントの作成
MAIN.prototype.make_check_button_design = function(checkbox){
if(!checkbox){return;}
let span = document.createElement("span");
span.setAttribute("type" , "checkbox");
if(checkbox.name){
span.setAttribute("name" , checkbox.name);
}
if(checkbox.value){
span.setAttribute("value" , checkbox.value);
}
if(checkbox.className){
span.setAttribute("class" , checkbox.className);
}
checkbox.parentNode.insertBefore(span , checkbox);
checkbox.setAttribute("data-designed" , "1");
this.check_checkbox(checkbox);
};
// ラジオボタンにイベントセット
MAIN.prototype.make_check_button_event = function(checkbox){
if(!checkbox){return;}
checkbox.addEventListener("click" , (function(e){
this.check_checkbox(e.target);
}).bind(this));
};
// ラジオボタンのチェック状態を判定してspanを書き換える処理
MAIN.prototype.check_checkbox = function(target_elm){
if(!target_elm){return;}
let checks = document.querySelectorAll("input[type='checkbox'][name='"+ target_elm.name +"']");
for(let checkbox of checks){
let span = checkbox.parentNode.querySelector("span[type='checkbox']");
if(!span){return;}
if(checkbox.checked === true){
span.setAttribute("data-checked" , "true");
}
else{
span.setAttribute("data-checked" , "false");
}
}
};
return MAIN;
})();
// 起動処理(ページ読み込み完了を待ってスタート)
switch(document.readyState){
case "complete" :
new $$checkbox();
break;
case "interactive" :
window.addEventListener("DOMContentLoaded" , function(){new $$checkbox()});
break;
default :
window.addEventListener("load" , function(){new $$checkbox()});
break;
}
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmo9MpIiJhTQxfgRSCuldOoNla07rTHztUPbivTESV6TIAEx43F1yrOscxkbctQ31WnIXHO-yXifzEvdynSifvRV3835DkNhTOEDcXOPKWDPJ53jrNf8jSx2c1WZ59EzHBXI4oHvnrzdZctHrCs9Ye1oX28cO_zteRsS_p_E6rf77rY0rNwRCxYCojolk/s1600-rw/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99%20%2817%29.jpeg)
ちょこっと解説
今回も、labelタグ内にあるinputタグのcheckboxボタン(type)をすべて自動置換する仕様にしています。 radioボタンとの違いは、 checkboxは、nameの付け方がユニークでないと行けないのに対して、 radioボタンは、連動させる同一nameのタグが存在するということで、 checkboxの方が比較的かんたんだったんですね。 でも、phpなどの指定で、自動配列nameのような名前をつけるケースもあるので、 ユニークname値がすべてではないのが現実ですが、 今回はそこは無視して作業を進めました。 あと、今回のコンセプトは、html+css+javascriptの構成のみで行いたかったので、 チェックボックスのチェック部分をcssのafter疑似属性で作っています。 単純に、borderを描いた要素をナナメ45度に傾けているだけなんですが、 とてもいい感じに見えると思いません? 気に入ってもらえた方、好きに改造して使ってもらっていいですよ。デモ
See the Pen efo-checkbox by YugetaKoji (@geta1972) on CodePen.
0 件のコメント:
コメントを投稿