CODEWITHSUNDEEP
htmlcss
Chandru
Chandru

Reputation: 1334

Floating Label is not working in Chrome as like mozilla firefox

Floating Label

The label for the input box will be displayed as a placeholder. Once the user clicks input box to enter some input, the placeholder of input box need to move top as a label.

Gif Image for floating label: https://media.giphy.com/media/l4Fsjj2HDqjOiTU0U/giphy.gif

I am trying to work with floating label in input box using the pure CSS method. I am using the below code for floating the label in web page.

HTML

<html>
<style>
.float-label {
   position:relative;
   margin-bottom:-20px;
}
label.set-float {
   color:#999;
   font-size:16px;
   line-height: 18px;
   font-weight:normal;
   position:relative;
   pointer-events:none;
   top:-20px;
   -o-transition:0.6s ease all;
   transition:0.6s ease all;
   -moz-transition:0.6s ease all;
   -webkit-transition:0.6s ease all;
}

.float-input:focus ~ label.set-float, .float-input:not(:placeholder-shown) ~ label.set-float{
   top:-40px;
   font-size:16px;
   line-height:18px;
   color: #787878;
   font-weight: normal;
   padding-left: 0px;
   outline: none;
}

.float-input:focus ~ label.required:after, .float-input:not(:placeholder-shown) ~ label.required:after{
   content: " *";
   color: red;
}

input[type="text"].input {
   background: transparent;
   border: none;
   border-bottom: 1px solid #C8C8C8;
   border-radius: 0px;
   font-size: 16px;
   line-height: 18px;
   color: #787878;
   width: 320px;
   padding: 0px 0px 0px 0px;
}

input[type="text"].input:focus {
   background: transparent;
   border: none;
   border-bottom: 1px solid black;
   border-radius: 0px;
   font-size: 16px;
   line-height: 18px;
   color: #333333;
   width: 320px;
   -webkit-box-shadow: inset 0px 0px 0px 0px #97144D;
           box-shadow: inset 0px 0px 0px 0px #97144D;
   padding: 0px 0px 0px 0px;
   outline: none;
}
.form-width {
   width: 352px;
   padding: 32px 15px 30px;
}

.div-pad {
   padding-top: 30px;
}
</style>
<div class="form-width">
    <div class="div-pad">
        <div class="float-label">
            <input id="name" type="text" class="float-input input" name="name" placeholder=""
               autocomplete="off" maxlength="50">
            <label class="set-float required">Name</label>
        </div>
    </div>
</div>
</html>

The mentioned code is working to my expectation in the browser Mozilla Firefox but not in Chromium browser.

Mozilla Firefox

Normal View

enter image description here

Focus View

enter image description here

Chrome

Normal View

enter image description here

Focus View

enter image description here

Can you please help with the suggestion to float the label in all types of desktop/mobile browsers (Safari, Opera and other default browsers) as like Mozilla Firefox.

Thanks in advance for your valuable suggestion and advice.

Upvotes: 1

Views: 480

Answers (1)

Aram Becker
Aram Becker

Reputation: 2196

It is due to the :placeholder-shown selector. It works the same on firefox and chrome, but firefox seems to have a default (empty) placeholder, while chrome has not. If you specify " " one for chrome as well it should work:

<input
    id="name"
    type="text"
    placeholder=" "
    class="float-input input"
    name="name"
    autocomplete="off"
    maxlength="50"
    data-dashlane-rid="6b78a2834d4b7713"
    data-form-type="other"
>

The problem you are experiencing is, that the :placeholder-shown selector only works in chrome when there is a placeholder to be shown. This means, the placeholder has to evaluate to something truthy, e.g. " ".

.float-label {
   position:relative;
   margin-bottom:-20px;
}
label.set-float {
   color:#999;
   font-size:16px;
   line-height: 18px;
   font-weight:normal;
   position:relative;
   pointer-events:none;
   top:-20px;
   transition:0.6s ease all;
}

.float-input:focus ~ label.set-float, .float-input:not(:placeholder-shown) ~ label.set-float{
   top:-40px;
   color: #787878;
   padding-left: 0px;
   outline: none;
}

.float-input:focus ~ label.required:after, .float-input:not(:placeholder-shown) ~ label.required:after{
   content: " *";
   color: red;
}

input[type="text"].input {
   background: transparent;
   border: none;
   border-bottom: 1px solid #C8C8C8;
   border-radius: 0px;
   font-size: 16px;
   line-height: 18px;
   color: #787878;
   width: 320px;
   padding: 0px 0px 0px 0px;
}

input[type="text"].input:focus {
   border-color: black;
   color: #333333;
   box-shadow: inset 0px 0px 0px 0px #97144D;
   outline: none;
}
.form-width {
   width: 352px;
   padding: 32px 15px 30px;
}

.div-pad {
   padding-top: 30px;
}
<div class="form-width">
    <div class="div-pad">
        <div class="float-label">
            <input id="name" type="text" class="float-input input" name="name" placeholder=" "
               autocomplete="off" maxlength="50">
            <label class="set-float required">Name</label>
        </div>
    </div>
</div>

Upvotes: 2

Related Questions