Floating label in input field with supported all browsers, without js and without required attribute

Question

I have created floating label in input field.In chrome view is working fine, but not properly viewed in mozilla firefox, please anyone help me, how to write code, note: Kindly suggest without javascript and without required attribute in input field. My code is attached .has-float-label { position:relative } .has-float-label label { position:absolute; left:0;top:0; cursor:text; font-size:75%; opacity:1; -webkit-transition:all .2s; transition:all .2s } .has-float-label select { -webkit-appearance:none; -moz-appearance:none; appearance:none } .has-float-label .form-control { font-size:inherit; padding-top:1em; margin-bottom:2px; border:0; border-radius:0; background:0 0; border-bottom:2px solid rgba(0,0,0,.1) } .has-float-label .form-control::-webkit-input-placeholder { opacity:1; -webkit-transition:all .2s; transition:all .2s } .has-float-label .form-control::-moz-input-placeholder { opacity:1; -moz-transition:all .2s; transition:all .2s } .has-float-label .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder { opacity:0 } .has-float-label .form-control:placeholder-shown:not(:focus)::-moz-input-placeholder { opacity:0 } .has-float-label .form-control:placeholder-shown:not(:focus)+label { font-size:150%; opacity:.5; top:.25em } .has-float-label .form-control:focus { outline:0; border-color:rgba(0,0,0,.5) } .input-group .has-float-label { display:inline-block }

Name

Run code snippetExpand snippet JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

First, we remove all the styles that corresponds to select css selector from the code, as we don't need it. The selectors .has-float-label, .has-float-label label and .has-float-label .form-control remained untouched as it does not relate with what you are trying to accomplish. To the main part now. .has-float-label .form-control::-webkit-input-placeholder .has-float-label .form-control::-moz-placeholder .has-float-label .form-control:-ms-input-placeholder .has-float-label .form-control::placeholder The ::placeholder pseudo-element (a visible thing that isn't really in the DOM) allow us to style the placeholder text (it wraps the actual placeholder text). In this case we add the transition property to make a smooth transition when the user clicks on the input. We use the platform-native selectors (-webkit- for Safari and Chrome, -moz- for Firefox, -ms- for Internet Explorer) to make our code more standards-compliant. The ::placeholder selector is not part of the main CSS standards. We also added the -webkit- platform-native selectors for the same reasons. .has-float-label .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder .has-float-label .form-control:placeholder-shown:not(:focus)::-moz-placeholder .has-float-label .form-control:placeholder-shown:not(:focus):-ms-input-placeholder .has-float-label .form-control:placeholder-shown:not(:focus)::placeholder The above selectors are quite interesting. Let's break them to pieces: placeholder-shown pseudo-class selects the when placeholder text is shown. not(:focus) is a CSS3 selector matches every element that is NOT :focus. This allow us to hide the placeholder text and show only the label when the cursor is not inside the input element. placeholder again is used for the same reason as we described. The opacity property with zero value allow us to hide the placeholder text. Lastly, .has-float-label .form-control:placeholder-shown:not(:focus) + * will make the label transition to the top. .has-float-label { position: relative; } .has-float-label label { position: absolute; left: 0; top: 0; cursor: text; font-size: 75%; opacity: 1; -webkit-transition: all .2s; transition: all .2s; } .has-float-label .form-control { font-size:inherit; padding-top:1em; margin-bottom:2px; border:0; border-radius:0; background:0 0; border-bottom:2px solid rgba(0,0,0,.1) } .has-float-label .form-control::-webkit-input-placeholder { -webkit-transition: all .2s; transition: all .2s; } .has-float-label .form-control::-moz-placeholder { -webkit-transition: all .2s; transition: all .2s; } .has-float-label .form-control:-ms-input-placeholder { -webkit-transition: all .2s; transition: all .2s; } .has-float-label .form-control::placeholder { -webkit-transition: all .2s; transition: all .2s; } .has-float-label .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder { opacity: 0; } .has-float-label .form-control:placeholder-shown:not(:focus)::-moz-placeholder { opacity: 0; } .has-float-label .form-control:placeholder-shown:not(:focus):-ms-input-placeholder { opacity: 0; } .has-float-label .form-control:placeholder-shown:not(:focus)::placeholder { opacity: 0; } .has-float-label .form-control:placeholder-shown:not(:focus) + * { font-size: 150%; opacity: .5; top: .25em; } .has-float-label .form-control:focus { outline: none; border-color: rgba(0, 0, 0, 0.5); }

Name

Run code snippetExpand snippet Note: The above code does not work with Edge. To make it work change the following: /* Remove this */ /* has-float-label .form-control:placeholder-shown:not(:focus)::placeholder { * opacity: 0; * } */ /* Add the following lines */ .has-float-label .form-control:not(:focus)::-ms-input-placeholder { opacity: 0; }