どうも。
WEBおじさんです。
寒くなってきましたね。
もうあと1ヶ月ちょっとで今年も終わりますね。
時が経つのは早いものです。
さて、今日はラジオボタンのデザインをカスタマイズしてみようと思います。
最近のデザイン事情で、流行りの感じにデザインするときにフォームだけ古い感じとかちょっとあれですよねー。
できることならフォームのボタンとかラジオボタンとかチェックボックスとか、そういう要素をちょっとデザインしたいですよねー。
でもラジオボタンとかサイズを大きくするとちょっと表示の質があまりよくなかったりするんですよね。
そんな時に役立つ小技その1です。
今回はラジオボタンを例に使いますが、ちょっと応用すればチェックボックスにも使える技です。
そして、ラジオボタンにはFontawesomeのアイコンを使ってみようと思います。
それでは、いつものように恒例のデモを。
やり方としてはパッと思い浮かんだのが2通り。
hiddenを使うやり方とradioを使うやり方。
デモには2通り書いたので、2通り解説します。
まずはソースを。
【HTML】
<div id=”boxbox”>
<p>■radios1</p>
<label class=”radios1″>
<i class=”far fa-circle” data-radio=”1″></i>
選択1
</label>
<label class=”radios1″>
<i class=”far fa-circle” data-radio=”2″></i>
選択2
</label>
<label class=”radios1″>
<i class=”far fa-circle” data-radio=”3″></i>
選択3
</label>
<label class=”radios1″>
<i class=”far fa-circle” data-radio=”4″></i>
選択4
</label>
<input type=”hidden” name=”data1″ value=””>
<p id=”smallwindow” class=”window”>値なし</p>
</div>
<div id=”boxbox2″>
<p>■radios2</p>
<label class=”radios2″>
<i class=”far fa-circle”></i>
選択5
<input type=”radio” name=”data2″ value=”5″>
</label>
<label class=”radios2″>
<i class=”far fa-circle”></i>
選択6
<input type=”radio” name=”data2″ value=”6″>
</label>
<label class=”radios2″>
<i class=”far fa-circle”></i>
選択7
<input type=”radio” name=”data2″ value=”7″>
</label>
<label class=”radios2″>
<i class=”far fa-circle”></i>
選択8
<input type=”radio” name=”data2″ value=”8″>
</label>
<p id=”smallwindow2″ class=”window”>値なし</p>
</div>
【CSS】
.window {
padding:15px;
border:1px solid #ccc;
background-color:#fdd;
max-width:400px;
}
label { cursor:pointer; }
label i {
border-radius:50%;
font-size:125%;
}
input[type=’radio’] { display:none; }
.fa-circle { background-color:#ccc; }
.fa-check-circle { background-color:#ffc; }
【JS】
$(function(){
//radios1
$(‘label.radios1’).on(‘click’,function(){
//クリックしたものの値を取得
var dataval = $(this).children(‘i’).attr(‘data-radio’);
//inputタグに値をセット
$(‘input[name=”data1″]’).val(dataval);
//クリック値を表示
$(‘#smallwindow’).text(‘値=’+dataval);
//クリックしたアイコンを変更
$(‘.radios1 i’).removeClass(‘fa-check-circle’).addClass(‘fa-circle’);
$(this).children(‘i’).removeClass(‘fa-circle’).addClass(‘fa-check-circle’);
});
//radios2
$(‘label.radios2’).on(‘click’,function(){
//クリックしたものを選択
$(this).children(‘input[type=”radio”]’).prop(‘checked’,true);
//クリック値を表示
var dataval = $(this).children(‘input’).val();
$(‘#smallwindow2’).text(‘値=’+dataval);
//クリックしたアイコンを変更
$(‘.radios2 i’).removeClass(‘fa-check-circle’).addClass(‘fa-circle’);
$(this).children(‘i’).removeClass(‘fa-circle’).addClass(‘fa-check-circle’);
});
});
まず1つ目はhiddenを使うやり方を。
これは、前回の記事で紹介した注釈のお話とちょっと似てるんですけど、iタグに「data-radio」という名前の属性を追加し、そこに実際に渡す値をそれぞれセットします。
そして、それぞれのlabelがクリックされた時にアイコンを変更し、クリックされたものの値を「data1」のvalueにセットするやり方です。
通常のHTMLの属性を使うやり方ではないので、イレギュラーと言われればイレギュラーなのですが、動きとしては単純です。
「要素をクリック」→「クリックされた値を取得」→「指定のタグへ値をセット」→「アイコンを変更」という4工程で完了です。
CSS的には特別なことを考えるような内容はないです。
しいて言えばアイコンが丸いので、border-radiusで角丸にしてあげて見易さから背景色を指定してあげる、ということですかね。
でもこれは見た目なのでどちらにも当てはまります。
そして2つ目のやり方ですが、こちらは通常のradioボタンのタグを使用します。
ただ、ラジオボタンは表示させません。display:noneで隠しておきます。ここだけがイレギュラーポイントですね。
クリックしたlabelタグ内にあるradioをcheckedにしてあげればそれで完了です。
「要素をクリック」→「クリックした要素内のラジオボタンをcheckedにする」→「アイコンを変更」という3工程です。
さっきのより1工程少ないですね。
ただ、1工程減るといっても大したことはありません。
どちらも同じ程度の内容と思って問題ないです。見た目は全く同じなので。
個人的にはタグが少ない方が好きなので、私はhiddenを選びますけどね。
そして、この機能を設置するのに注意点が一つ。
今回Fontawesomeのアイコンを使用しているのですが、クリックしたときに都度一旦リセットするか、もしくは選択されている値のアイコンを戻すように記述する必要があります。
今回は一旦対象全てのアイコンをリセットし、その後にチェックされているアイコンに変更するようにJSを書きました。
チェックされている値のアイコンだけを特定するやり方は記述が少し長くなってしまいそうだったので今回は書いていませんが、そのやり方でも全然問題ないですね。
ということで、ちょっとややこしいんじゃないかと思われるフォーム要素のデザイン変更は意外と簡単にできる、ということでした。
デザインの幅が広がりましたね。
ではまた！
