私はタイプのラジオで入力を行うために、ブートストラップを使用しています4

Question

ブートストラップでの無線タイプの入力をカスタマイズし、私はこのようになるために私のラジオの入力をカスタマイズしたい：

は、ここに私のhtmlです

<form class="size-option"> 
      <div class="form-check form-check-inline"> 
      <label class="form-check-label"> 
       <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">S 
      </label> 
      </div> 
      <div class="form-check form-check-inline"> 
      <label class="form-check-label"> 
       <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">M 
      </label> 
      </div> 
      <div class="form-check form-check-inline"> 
      <label class="form-check-label"> 
       <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">XL 
      </label> 
      </div> 
     </form> 

ここに私のscssです

.size-option { 
    .form-check { 
    border: 1px solid $clr-black; 
    margin: 0; 
    .form-check-label { 
    padding: 5px 20px; 
    cursor: pointer; 
    font-weight: bold; 
    } 
    .form-check-input { 
    visibility: hidden; 
    display: none; 
    } 
} 
} 

助けていただければ幸いです！

Answer 1

これはあなたが探しているものではなく、ほぼ同じように役立つことを期待しています。あなたが望むように、必要な変更を行います。（参考：追加jQueryのサポート）

Plunker

<div class="thing"> 
     <div data-toggle="buttons"> 
     <label data-toggle="radio-tab-label" data-focus-target="true" data-target="#option1" class=" mr-4 btn btn-primary" tabindex="0"> 
      <input type="radio" value="One" name="options" id="option1" checked> S 
     </label> 
     <label data-toggle="radio-tab-label" data-focus-target="true" data-target="#option2" class="mr-4 btn btn-primary" tabindex="0"> 
      <input type="radio" value="Onea" name="options" id="option2"> M 
     </label> 
     <label data-toggle="radio-tab-label" data-focus-target="true" data-target="#option3" class=" mr-4 btn btn-primary" tabindex="0"> 
      <input type="radio" value="Ones" name="options" id="option3"> XL 
     </label> 
     </div> 
    </div>