CSSとJavaScrptのチェックボックスの覚書です。
目次
【設定】javascriptからcheckbox checkedを外す/追加
inputのidを指定すればOKです。追加はCSSでやることも多いためJS側からは外すを使うことが多いですかね。
// 追加
document.getElementById("checkboxid").checked = true;
// 外す
document.getElementById("checkboxid").checked = false;反映されない場合はIDが間違っているとか凡ミスが多いかも。
javascriptのcheckbox checkedの無効化/有効化
CSSのみで行うのであれば、このような方法もあります。
input[type=button][disabled] {
background-color: #bfbfbf;
cursor: not-allowed;
box-shadow: 0 6px #ccc;
}しかし、input以外の要素、たとえばアイコンなどがある場合は外側をdivで囲まないといけません。その場合、JSで行った方がよさそうです。CSSでクラスをつけたり外したりする方法も有効そうです。
.upbutton-disabled {
color: #888;
cursor: not-allowed;
background-color: #bfbfbf;
box-shadow: 0 6px #ccc;
}// 無効化
document.getElementById("checkboxid").disabled= true;
// 有効化
document.getElementById("checkboxid").disabled= false;チェックしたチェックボックスを押せないようにしたい場合などに活用できます。
javascriptのcheckbox checkedの判定
if(document.getElementById("checkboxid").checked){
document.getElementById("checkboxid").checked = false;
}else{
console.log('null, false')
}アイコン型(fontawesome)のチェックボックスの作り方
bootstrapvueを使ってもできるのかもですが、勝手に適用されるコードが邪魔で四角のアイコンボタンを作る際にbootstrapvueは使いませんでした。
作り方はこちらを参照しました。ありがたい動画です。
基本のHtmlコードはこうです。
<label for="btn" class="checkbox-name">
<input id="btn" />
<span class="checkbox-name-icon">★</span>
文字
</label>forとidが合致していないとチェックボックス以外反応せず、ラベルをクリックしてもうまくいきませんので注意ください。
まず、基本の考え方はAndroid、iOS、PCなどで使われるデフォルトのチェックボックスは消すこと。absoluteは消したチェックボックスが見えない小石のような感じで、ひっかって邪魔になるからです。他のフォームと整列した際に揃わない場合があります。
.checkbox-name input[type='checkbox-name'] {
opacity: 0;
position: absolute;
}absoluteにtopもleftもいれないことにより、この要素で完結しています。relativeいらずです。
次に背景をどうするかです。マークだけ色をつけるのか、文字を含めてボタンにするのかです。
/*マークだけ*/
.checkbox-name span {
background-color: #f6f4e9;
}
/*文字を含める*/
.checkbox-name {
background-color: #f6f4e9;
}基本のフレームさえできればあとは装飾なので簡単です。
チェックボタンを消すのは、display:none;では全部消えてしまうので領域の確保と当たり判定が可能なopacity:0;を使っているようです。チェックボタンはposition: absolute;でボックスの中にいれたのち、透明にしているようですね。詳しく動画をみてください。
動画では解説されていませんが、このボタンをつくるとき、hover時に子要素を動かしたい場合がでるかもしれません。
.parent::hover .child {
color: #555;
}childはclass名で指定する必要があるようで、次のような書き方ではうまくいきませんでした。
.parent::hover span {
color: #555;
}:hover時動かす場合、親と子の間に、+を入れると解説されているサイトもありますが、子要素の場合はあってもなくても動きます。
アイコンに文字をいれた場合、勝手に改行されて悩むかもしれません。width: 100%;で伸ばしてあげましょう。
.parent span {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
font-size: 12px;
font-weight: 900;
color: #bfbfbf;
text-align: center;
transform: translateY(-50%) translateX(-50%);
}fontawesomeの場合、ソースをみるとsvgです。次のような指定でもOKです。
.parent svg {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
font-size: 12px;
font-weight: 900;
color: #bfbfbf;
text-align: center;
transform: translateY(-50%) translateX(-50%);
}ただ、直接指定すると、以前、セレクトボックスの矢印で困ったことになってしまいました。widthの塗りつぶすが効かずfontawesomeの幅になってしまいました。他にも方法はあるかと思いますが、個人的にはspanをかまして回避することが多いです。
fontawesomeのバージョン指定に注意
Font Awesomeのサイトがいつのまにかリニューアル!
— 個人開発作家 まったりんneru (@neruplan) March 8, 2022
検索にバージョン指定がついているhttps://t.co/JhHc9oDVSm
バージョンにより名前が変わるものがあるため注意!
5 ‘chevron-circle-down’
6 ‘circle-chevron-down’#プログラミング独学 #エンジニアと繋がりたい #Webデザイナーと繋がりたい
Twitterでも簡単な技術情報の配信をはじめました。
fontawesomeの無料版とpro版の違い
検索では無料とプロは分けられないようです。まあ、有料契約してほしいので、そうなっているのかなっと。。。iconを選んだときに以下のようなメッセだとプロ版のようです。
Start using this pro icon
この場合もアイコンは表示されないです。要注意ですかね。
チェックボックスのCSSデザイン
チェック時のCSS
アニメーションなど含め、zennで詳しくは執筆してみました。
lebelとinputを階層する際にforはいらない
階層にするときidやforはいらないです。むしろfor入れるとチェックボックス以外をクリックしたい際に動かないようです。
<label>
<input />
</label>input:disabled・無効時のCSS
inputが無効のとき、アイコンの色が変わるサンプルです。cursor: not-allowed;はカーソル無効なので検証する際に手がかりになります。
.checkbox input:disabled + .checkbox-icon {
color: #fff;
cursor: not-allowed;
}こういうサンプルも見かけたのですが、個人的に使ったことないですね。
.checkbox input:checked:disabled + .checkbox-icon {
color: #fff;
cursor: not-allowed;
}checkboxのラベルが複数行(2行以上)の際、チェックボックス を上揃えにする
モバイル端末では意外に短い単語も複数行になってしまいます。他のやり方もあるようですが、stackoverflowさんにあるようにabsoluteが楽です。
checkbox multi line label cssあたりでぐぐりましょう。
子要素が縦横比が潰れる
親要素のpaddingが原因になっていることが多い気がします。
コメント