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
}
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)