タブレットで閲覧した時に最適化された形で、フォームブリッジのカスタマイズを考えています。
cssを活用し、「チェックボックスの□を非表示」「チェックボックスをボタンタイプに変更」は実現が出来ました。
残課題は「チェックボックスの選択時に背景色・文字色を変更する」ことでタブレット向けに最適化出来ると考えているのですが、如何せん選択時の指定方法が分かりません…。
どなたかご教授の程をお願い出来ないでしょうか。
＜現状のcss＞
/* チェックボックスのカスタマイズ */
/* チェックボックス ラベル部分 */
span.el-checkbox__label{
display: block; /* ブロックレベル要素化する */
float: left; /* 要素の左寄せ・回り込を指定する */
margin: 3px; /* ボックス外側の余白を指定する */
width: 300px; /* ボックスの横幅を指定する */
height: 60px; /* ボックスの高さを指定する */
padding-left: 2px; /* ボックス内左側の余白を指定する */
padding-right: 2px; /* ボックス内御右側の余白を指定する */
color: #b20000; /* フォントの色を指定 */
text-align: center; /* テキストのセンタリングを指定する */
line-height: 60px; /* 行の高さを指定する */
cursor: pointer; /* マウスカーソルの形（リンクカーソル）を指定する */
border: 2px solid #006DD9;/* ボックスの境界線を実線で指定する */
border-radius: 5px; /* 角丸を指定する */
}
/* チェックボックスの□を非表示 */
span.el-checkbox__inner {
display:none;
}
