Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

On input focus change the font size of label

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>
like image 747
Vrishty Garg Avatar asked Apr 23 '18 02:04

Vrishty Garg


People also ask

How do I change font size in labels?

To change the font size in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property font-size. HTML5 do not support the <font> tag, so the CSS style is used to add font size.

How do you change the font size in a label in HTML?

In HTML, you can change the size of text with the <font> tag using the size attribute. The size attribute specifies how large a font will be displayed in either relative or absolute terms. Close the <font> tag with </font> to return to a normal text size.

How do I change font size in labels in Visual Basic?

In Visual Basic, you set the FontSize property by using a numeric expression equal to the desired size of the font. The setting for the FontSize property can be between 1 and 127, inclusive.


1 Answers

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>
like image 174
CertainPerformance Avatar answered Sep 19 '22 00:09

CertainPerformance