Floating label not working when required attribute removed

floating label not working in ie11
sass floating label
placeholder-shown floating labels
float label
floating label overlapping
materialize floating label
reactstrap floating label
floating label textarea

I have done a floating label to my input filed like below. And it's working fine as well. But when I remove that required field of input,the floating label is not working (though I don't need the required filed). Please suggest some ways to solve this issue.

input:focus~.floating-label,
input:not(:focus):valid~.floating-label {
  top: 6px;
  bottom: 12px;
  left: 20px;
  font-size: 11px;
  opacity: 1;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 18px;
  text-transform: uppercase;
  transition: 0.2s ease all;
  color: #b2b2b2;
}
<input type="text" id="floating_name" value="" required/>
<span class="floating-label">Enter</span>

Selector input:focus selects input when it get focus and Selector input:not(:focus):validselects input if valid input not be focus.

A. when you use required attribute and Do not enter any value in it:

1)Before focus and when lose focus:Nothing not be selected.(original state)

2)after focus input is invalid and it is selected with input:focus.

B. when you remove required attribute:

1)before focus select with input:not(:focus):valid.

2)after focus select with input:focus.

So, input is selected forever , And .floating-label will not return to the original state.

in your question, you say:"I don't need the required filed"

So, remove input:not(:focus):valid~.floating-label.

Full Code:

input:focus ~ .floating-label {
  top: 6px;
  bottom: 12px;
  left: 20px;
  font-size: 11px;
  opacity: 1;
}

.floating-label {
position: absolute;
pointer-events: none;
left: 20px;
top: 18px;
text-transform: uppercase;
transition: 0.2s ease all;
color: #b2b2b2;
}  
 <input type="text" id="floating_name" value="">
 <span class="floating-label">Enter</span>

Floating label not working when required attribute removed, Selector input:focus selects input when it get focus and Selector input:not(:focus): valid selects input if valid input not be focus. A. when you use required attribute� Label switches from placeholder mode to label when input is focused or has content in it. This concept has been first introduced by Matt D. Smith in 2013 and it has become a widespread pattern since then, even becoming a standard element in Google's Material Design. Floating label input from Google Material UI docs

The :valid selector only works for form elements with limitations. When you remove required part of your CSS no longer applies. I removed input:not(:focus):valid ~ .floating-label and it works again.

input:focus~.floating-label {
  top: 6px;
  bottom: 12px;
  left: 20px;
  font-size: 11px;
  opacity: 1;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 18px;
  text-transform: uppercase;
  transition: 0.2s ease all;
  color: #b2b2b2;
}
<input type="text" id="floating_name" value="" />
<span class="floating-label">Enter</span>

Floating Label's - Pure CSS - without Required*, I have done a floating label to my input filed like below. And it's working fine as well. But when I remove that required field of input,the floating label is not working� To make this work, the markup has to be structured in a very specific way: the input has to be in front of the label. (Don't forget the for attribute on the label!) In this example, I've given the label a class, form-control-placeholder, and made it absolutely positioned. The container, which holds the label and input, is set to be relatively

html: Floating label not working when required attribute removed, <input class="floating-input" type="text" onclick="(this.type='time')" placeholder=" " >. 14. <span class="highlight"></span>. 15. <label>Time</label>. 16. </div>. Finally, our input field also only works with 1 input field on the page. We will need to build up our code so multiple input fields will use a floating label. Our floating label script will use a module pattern handle our use-cases. We will capture the input fields we want to apply the float label.

 function checkForInput(element) {
        // element is passed to the function ^

        const $label = $(element).siblings('label');

        if ($(element).val().length > 0) {
            $label.addClass('input-has-value');
        }

         else {
            $label.removeClass('input-has-value');
        }
    }

    // The lines below are executed on page load
    $('input').each(function () {
        checkForInput(this);
    });

    // The lines below (inside) are executed on change & keyup
    $('input').on('change keyup', function () {
        checkForInput(this);
    });

     $('input').focus(function () {
         const $label = $(this).siblings('label');
         $label.addClass('input-has-value');
    });

Float Labels with CSS, I have done a floating label to my input filed like below. And it's working fine as well. But when I remove that required field of input,the floating� The labels are just off the right of the boxes, and nothing happens on focus except the border color change. This is in a file with nothing but the code copied from this css-tricks example for both form and style. I then changed my doctype etc. to html5 thinking it might be something not handled by previous versions, but apparently it’s not that.

input floating label not trigger, It's not quite as sexy as the Nest ones, where the text is fading out as the label is sliding up. Not that inputs aren't already, and not that labels aren't when they have a proper for attribute, but <div> <input id="name" name="name" type="text " required> <label Alex, I don't think the :empty selector would work in this case. Back in June of 2012, I wrote that the Placeholder Attribute Is Not A Label. The post points out that it’s bad practice to use text to look and behave as a placeholder rather than a label. This is generally known as “floating labels” or “inline labels” (I also call this LAP for short, “labels as placeholders”.)

How to build a floating label input field | by Joshua Studley, Floating label not trigger when using with angular or jquery set input value.its set For last few weeks we have been working on new update of MDB, so we didn't and in line 130 remove .active class. label.active { change to: label { Then compile your custom mdb.css 2. Just set attribute for input fields: placeholder=" "� Floating Label. Floating labels display the type of input a field requires. Every Text Field and Select should have a label, except for full-width text fields, which use the input's placeholder attribute instead. Labels are aligned with the input line and always visible. They can be resting (when a field is inactive and empty) or floating.

Floating label not working correctly, Let's take a look at building a floating label for input fields using css animations and es6. We could update the y coordinate, but that isn't the problem. When exiting the field, we remove the placeholder attribute itself. * Use Jekyll's markdownify filter instead of a custom plugin () * Allow to change `.table-striped` `odd` or `even` () * Remove -Pre from Nuget install * dist * rearrange and override extra borders * tweak html * Update dropdown.js to allow referenceElement () * ignore case () Less on 2 symbols * Remove escaping selector and add a warning to inform folks to escape their selectors () * Use

Comments
  • Thanks a lot..Its working fine..But can you please explain, how a space is important here.(between valid and bracket )
  • @temp , you use input:not(:focus):valid but do'nt insert to it limitation.when you use input:not(:focus) :valid remove this problem.
  • Thank you so much for the explanation. This also working fine.But still I need that valid to avoid other overlapping issues.
  • This is the correct answer. The other answers don't work, because when the input is blurred, the label no longer floats.
  • .form-group, .form-wrap { position: relative; margin-bottom: 1.5rem; } .form-control-placeholder { position: absolute; top: 8px; padding: 7px 0 0 13px; transition: all 200ms; opacity: 1; } .form-control:focus + .input-has-value, .form-control:valid + .input-has-value { font-size: 15px; transform: translate3d(0, -130%, 0); opacity: 1; color: #101712; } .form-control:focus { border-color: #95996f; box-shadow: 0 0 0 1px rgb(149, 153, 111); }
  • Please put your answer always in context instead of just pasting code. See here for more details.