bootstrap radio button label styling
<p>I try to style my bootstrap radio button as below -</p>

<p>label in default: transparent background and font in green color</p>

<p>label after click (i.e. after it is checked): green background color and font in white color</p>

<pre><code>&lt;div id ="trial" data-toggle="buttons"&gt;     
&lt;label class="btn btn-success btn-outline"&gt;&lt;input type="radio" name="sex" value="M"&gt;Male&lt;/label&gt;
&lt;label class="btn btn-success btn-outline"&gt;&lt;input type="radio" name="sex" value="F"&gt;Female&lt;/label&gt;   
&lt;/div&gt;
</code></pre>

<p>I tried to make use of 'active' and 'focus' but it will return to default when I click somewhere else. Is there any way to keep the 'label after click' (radio button is checked) even it is clicked somewhere else.</p>

<p>Here is my code:
<a href="https://jsfiddle.net/muchproblem/4vmucdq7/17/" rel="nofollow">https://jsfiddle.net/muchproblem/4vmucdq7/17/</a></p>

<p>Thanks in advance</p>