選択ボタンCSS装飾メモ
  1. 親要素にクラス追加、.pic-bar-（横スクロール）または .pic-box-（ボックス整列）
    -> inputは、opacity:0; width:100%;height:100%;で透明化、label内でMAX
  2. inputよりあとに、<span class="md-radio"></sapn> = ダミーinputが表示
    -> ダミーinputクラスは４種類、md-check,lg-check,md-radio,lg-radio
  3. 親要素にpicimgクラス付与で、未選択要素（画像）を半透明化
  4. 選択時にアウトラインで囲いたい要素にotlクラス
  5. label要素の高さ・幅は指定が必要
  6. テキスト要素は、b-txt, t-txt, xy-txt、クラスで固定位置"
  7. テキスト要素に、z-shade-2-wやp-2などでみやすさを調整
画像とラジオボタン選択
xy-txt z-shade-2-wでテキスト調整
md-radio z-depth-1　で多少、認識が上昇
md-radio mb-n4　でダミーinput調整（マイナスマージン！）
lg-check mb-3　でダミーinput調整

  <div class="pic-bar-">

    <label>
      <input class="lg-input" type="radio" name="img-design" value="normal-img" checked="checked">
      <span class="lg-radio"></span>//ダミーinput：省略すると画像で選ぶラジオボタンになる
      <img src="/css/img/dummy.jpg" class="img-fluid">//
      <span class="labetxt">ノーマル</span>
    </label>

</div>



/* タブバー とコンテンツ領域 */
.pic-bar-, .pic-box- { width:100%; display: flex; padding: 0 0 1rem; }
.pic-box- { flex-wrap: wrap; }
.pic-bar- { flex-wrap: nowrap; overflow-x: auto;}


/* タブ */
.pic-box- > label,
.pic-bar- > label { position: relative; flex-shrink: 0; flex: initial; z-index: 1;
  text-align: center;  padding: 10px 1em;  cursor: pointer;  font-weight: bold; list-style: none; border-radius: 5px 5px 0 0;}
.pic-bar- > label { white-space: nowrap; }

/* Largr Radio Botton */
.pic-box- > label > input,
.pic-bar- > label > input { position: absolute; left: 0;  bottom: 0;  opacity: 0;  width: 100%;  height:100%; z-index: 3; cursor: pointer; }

/* 未選択の場合、色を薄くする */
.picimg > label > input ~ img,
.picimg > label > input ~ * img { opacity:0.5; }

/* 選択済みの場合、色を濃くする */
.picimg > label > input:checked ~ img,
.picimg > label > input:checked  ~ * img { opacity:1;}

/* ラベルクラスに */
label > input:checked ~ .otl,
.pic-box- > label.checked,
.pic-bar- > label.checked { outline-width: 2px; outline-style: solid; outline-color: rgba(3, 169, 244, 0.3); }


  //CODE
<div id="pic-bar-" class="pic-bar- blk-b" data-color="blk-b">
<div id="boxarea" class="pic-bar- d-inline-flex align-items-start">

<label class="radio-lg txtboxbar">
<input class="lg-input" type="radio" name="box-design" value="normal-box">
<span class="lg-radio"></span>

<div class="boxtpl">
  <div class="normal-box textbox"><span class="box-title"></span><div class="box-body" placeholder="装飾なしの文章ブロック。通常の文章を書き込むときは装飾なしにします"></div></div>
</div>
</label>
</div>
</div>

  
  

<div id="txtBoxColor" class="colorbar">
<div class="pic-bar-color d-inline-flex align-items-start">
<label class="radio-lg">
<input class="lg-input" type="radio" name="box-color" value="blk-b"> <span class="lg-radio"></span>
<div class="w53 black o-"></div>
</label>
</div>
</div>



<div id="faceanimebar" class="pic-bar-face">
<label class="radio-lg facebar">
  <input class="lg-input" type="radio" name="face-ani" id="face_def" value="face_def"><span class="lg-radio"></span>
  <div class="face-label face_def"><span class="face_emotion"></span><div class="face-o w64"><img src="/css/icon/face.png"><span class="facetag">なし</span></div></div>
</label>
</div>
向き

<div id="cdir" class="w-100 mt-4">
<span class="d-inline-block">向き</span>
<span class="fa-stack fa-lg"><i class="fas nja-circle-b fa-stack-2x text-white"></i><i class="fas nja-operator fa-lg fa-stack-1x"></i></span>

<div class="d-inline-block like-tab">
  <label for="cleft"><input type="radio" name="cdir" value="left" id="cleft"><span class="tgu bbl-l">左</span></label>
  <label for="cright"><input type="radio" name="cdir" value="right" id="cright"><span class="tgu bbl-r">右</span></label>
</div>

<span class="fa-stack fa-lg"><i class="fas nja-circle-b fa-stack-2x text-white"></i><i class="fas nja-operator fa-lg fa-stack-1x"></i></span>
</div>