How do I focus the current selection in a HTML form?
<p>I have a html form with multiple questions that user need to answer, I want to add some style as : when the user clicks a question I want it to be focused and blur the other questions, how should I approach this. </p>

<p>Here is the form I made,but I wan to change the opacity of the div when clicked on the input field please suggest how to approach this.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).on('focus active', 'input, textarea', function(){
                    $('label[for='+$(this).attr('id')+']').addClass('active');
                });
                $(document).on('blur', 'input, textarea',function(){
                    $('label[for='+$(this).attr('id')+']').removeClass('active');
                });</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>input[type=text], input[type="email"],input[type="number"] {
    width: 50%;
    display: block;
    padding: 5px 5px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid #ccc;
}
            input:focus {
    outline: none;
}
div {
    opacity: 0.5;
}
.active{
    font-size: 50px;
    color: darkgray;
    opacity: 1 px !important;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
&lt;body&gt;
    &lt;head&gt;
        
        &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;
      &lt;/script&gt;


         &lt;/head&gt;
            &lt;div&gt;
                &lt;label for="contact_form_name"&gt;&lt;span class="qno"&gt;1.&lt;/span&gt; What is your name?*&lt;/label&gt;
                &lt;input id="contact_form_name" name="contact_form_mail" type="text"&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;label for="contact_form_phone"&gt;&lt;span class="qno"&gt;2.&lt;/span&gt;What is your contact number?*&lt;/label&gt;
                &lt;input id="contact_form_phone" name="contact_form_phone" type="number"&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;label for="contact_form_email"&gt;&lt;span class="qno"&gt;3.&lt;/span&gt;What is your email address?**&lt;/label&gt;
                &lt;input id="contact_form_email" name="contact_form_email" type="email"&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;label for="contact_form_city"&gt;&lt;span class="qno"&gt;4.&lt;/span&gt;Which city do you live in?*&lt;/label&gt;
                &lt;input id="contact_form_city" name="contact_form_city" type="text"&gt;
            &lt;/div&gt;
           
&lt;/body&gt;</code></pre>
</div>
</div>
</p>