![eyecatch](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTRcPYo-nFr0pxKckS_Rzh4YoXY9Ndye2OepmXcu4qqj5WNJkppLuF-IIQOBG7HQ593irNxa_mzQWJJZLjpmBEfVX6qiawahLrBc22rIt53DIRdsErVjV0mGybj6mHYA45O1Oo2jGd408JltX96E5S3t5PlOLrp1mwAeEx9ZEAliqPiTSwmt4TJC7D/s1600-rw/1621467890_0.png)
ブラウザごとの見栄え
<label><input type="radio" name="test" value="1">1</label><br>
<label><input type="radio" name="test" value="2">2</label>
標準的なradioボタンを、ブラウザ別に表示してみます。
GoogleChrome
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwu_we4HhbZPSCMYjzDVoLt37IpD_9057oUyA5ZWz-p8i6aJMBS9O27od_rgOaPkY0eMA-FtdqfDBwztx1Xacph9Mv8sFvctGTQ9zdOmkdebWbjcbkNFAK7y51EtG4gmK51bAPPlCwpW6X877IElxerEH-hGQpAAgtmTDsZJNtVkpYPdDgi6F_nbYSQWI/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%2818%29.jpeg)
Firefox
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkyL66Co9J4xfbziABOgKR7GapCh1u1oGU7CixvPTZDdDOnDQWj4YPJBQQuXQfv8z7F5pp0KRgxdvF-UW-ZnQec9ahujgcEIZzQTGcgtuT0ksWwX6R94nvKYmv_zjttr9lmdfwELp4RGYT165aolkrRH7jABcbi7f5wv9LVDim-AkbnhMRfs-plI1p2qM/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%2819%29.jpeg)
Safari
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKRnu1V6hjjm_dG37N1g7yS0LnhThTaVcWBzKMY5tInzrYC7BcofJsiZNJGnNDiaJD-0M1NUbBpzNxzKCLhUbkH_zPT02G6vAHD13v7QGD-QnXyyoCeAB1u4j7yRwyUoY0BSH4EKu8dMEaPtCNfDkgNeLrS2OGIATS9vgnlbBnIhJo49NC873Vtyp9MGo/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%2820%29.jpeg)
iPhone
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ1EiclNElOcCVqEpx9G8gchl-bwDFsH7AaLCluY47WyJO4QfpARymNs3_cFvu_8rpzVVJ922EXabBhz3p-4T-AM5nzaU_zXg6YM3YNxrvEOhOOmfLDqrT5ZrueZC2JlECLlRfjjxuOwtBpdkwlHz-iX7jARKqOByGQD0FQ7j2Tyd6s_FpqGaYvf5-cjA/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%281%29.png)
ソースコード
index.html<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="radio.css">
<script src="radio.js"></script>
</head>
<body>
<label><input type="radio" name="test" value="1">1</label><br>
<label><input type="radio" name="test" value="2" checked>2</label>
</body>
</html>
radio.css
span[type="radio"]{
border:2px solid orange;
position:relative;
display:inline-block;
width:32px;
height:32px;
border-radius:50%;
vertical-align:middle;
margin:4px;
cursor:pointer;
}
span[type="radio"][data-checked="true"]:before{
content:"";
background-color:orange;
width:80%;
height:80%;
display:block;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
border-radius:50%;
}
input[type="radio"][data-designed="1"]{
display:none;
}
radio.js
window.$$radio = (function(){
// labelタグに入っているradioボタンの一覧を取得
let MAIN = function(){
let radios = document.querySelectorAll("label input[type='radio']");
if(!radios){return;}
for(let radio of radios){
this.set_radio_button(radio);
}
};
// ラジオボタンの設定フロー
MAIN.prototype.set_radio_button = function(radio){
if(!radio){return;}
this.make_radio_button_design(radio);
this.make_radio_button_event(radio);
};
// 表示するラジオボタンエレメントの作成
MAIN.prototype.make_radio_button_design = function(radio){
if(!radio){return;}
let span = document.createElement("span");
span.setAttribute("type" , "radio");
if(radio.name){
span.setAttribute("name" , radio.name);
}
if(radio.value){
span.setAttribute("value" , radio.value);
}
if(radio.className){
span.setAttribute("class" , radio.className);
}
radio.parentNode.insertBefore(span , radio);
radio.setAttribute("data-designed" , "1");
this.check_radio(radio);
};
// ラジオボタンにイベントセット
MAIN.prototype.make_radio_button_event = function(radio){
if(!radio){return;}
radio.addEventListener("click" , (function(e){
this.check_radio(e.target);
}).bind(this));
};
// ラジオボタンのチェック状態を判定してspanを書き換える処理
MAIN.prototype.check_radio = function(target_elm){
if(!target_elm){return;}
let radios = document.querySelectorAll("input[type='radio'][name='"+ target_elm.name +"']");
for(let radio of radios){
let span = radio.parentNode.querySelector("span[type='radio']");
if(!span){return;}
if(radio.checked === true){
span.setAttribute("data-checked" , "true");
}
else{
span.setAttribute("data-checked" , "false");
}
}
};
return MAIN;
})();
// 起動処理(ページ読み込み完了を待ってスタート)
switch(document.readyState){
case "complete" :
new $$radio();
break;
case "interactive" :
window.addEventListener("DOMContentLoaded" , function(){new $$radio()});
break;
default :
window.addEventListener("load" , function(){new $$radio()});
break;
}
表示サンプル
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHtTRChjFZzS_0rxrr-qT4BHjTG51AShCjQrUUuenRB_GjXAmq5RVcKM4XC6edfO6SRWm8-jNgJOn3i86ghUPsulh-VWTT334KdGr2HbFUUgL6XG49Fl42faGLXrMyyKwcF3Ts-QSYTwKpr3oBn9zQpeqLofooFmTsAD-H6zfHEDmTzhMleI9qpQEYfNc/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%2821%29.jpeg)
デモ
See the Pen efo-radio by YugetaKoji (@geta1972) on CodePen.
0 件のコメント:
コメントを投稿