在输入焦点上更改标签的字体大小

Question

I am trying to implement floating label on input focus as this one with styled-components: https://jsfiddle.net/273ntk5s/3650/

But my form is loading dynamically so the label is loaded first and then the inpout. The input focus change doesn't work when the input type text is loaded afterwards. Is there a way to achieve this? I have used jQuery also, still no luck. CSS:

 var oldSize; $('#FirstName').focus(function() { oldSize = $("label[for='FirstName']").css('font-size'); $("label[for='FirstName']").css('font-size', 12); }); $('#FirstName').blur(function() { $("label[for='FirstName']").css('font-size', oldSize); }); 

 .inputText { font-size: 14px; width: 200px; height: 35px; } .floating-label { position: absolute; pointer-events: none; font-size: 14px; transition: 0.2s ease all; } input[id='FirstName']:focus + .floating-label { font-size: 11px; } 

 <div> <label for="FirstName" class="mktoLabel mktoHasWidth floating-label" style="width: 100px;">First name:</label> <input id="FirstName" name="FirstName" maxlength="255" type="text" class="mktoField mktoTextField mktoHasWidth mktoRequired mktoInvalid inputText" style="width: 150px;"> </div> 

Answer 1

font-size accepts a value in the format of ##px . Numbers alone won't work. You also need to properly include jQuery in your fiddle.

 var oldSize; $('#FirstName').focus(function() { oldSize = $("label[for='FirstName']").css('font-size'); $("label[for='FirstName']").css('font-size', '42px'); }); $('#FirstName').blur(function() { $("label[for='FirstName']").css('font-size', oldSize); }); 

 .inputText { font-size: 14px; width: 200px; height: 35px; } .floating-label { position: absolute; pointer-events: none; font-size: 14px; transition: 0.2s ease all; } input[id='FirstName']:focus + .floating-label { font-size: 11px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <label for="FirstName" class="mktoLabel mktoHasWidth floating-label" style="width: 100px;">First name:</label> <input id="FirstName" name="FirstName" maxlength="255" type="text" class="mktoField mktoTextField mktoHasWidth mktoRequired mktoInvalid inputText" style="width: 150px;"> </div>