Floating label for input=date

user_7689052 0
Viewed 523

I am using TailwindCSS for my Vue application. What I am looking for is a solution to floating label for input date element. The problem is that the input label always remain activated.

Preview

What I have tried:

<div class="relative">
    <input id="date-placeholder" type="date" inputmode="date" class="focus:ring-primary focus:border-primary block w-full sm:text-sm border-gray-300 rounded-md" value="2019-02-23" />
    <label
        for="date-placeholder"
        class="absolute left-3 bg-white -top-2.5 px-1 text-gray-600 text-sm transition-all duration-300 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2.5 peer-focus:-top-2.5 peer-focus:text-gray-600 peer-focus:text-sm">
        Test Date
    </label>
</div>
vuejs2 tailwind-css css html
1 Answers

Live check: jsfiddle.net/jucp51eo/

    <!--input-->
        <section class="full" >
        <div class="form-label-group">
        <input type="text" id="inputCheckin" style="flex-direction: row;" class="form-control" placeholder="Check-in" name="checkin" autocomplete="off" onfocus="(this.type='date')" onblur="if(!this.value) this.type='text'" required>
        <label for="inputCheckin">Check-in</label>
        </div>
        </section>

Input Id attribute should be the same with Label For attribute.

Input type="text" but onfocus changes on type="date" (here is the trick)

        <style>
        :root {
         --input-padding-x: .75rem;
         --input-padding-y: .70rem;
        }
        
        .form-label-group {
         position: relative;
         align-items: center;
         justify-content: center;
         display: grid;
         justify-content: center;
         align-items: center;
        }
        
        .form-label-group > input,
        .form-label-group > label {
         padding: var(--input-padding-y) var(--input-padding-x);
        }
        
        .form-label-group > label {
         position: absolute;
         top: 0;
         left: 0;
         display: block;
         height: 40px;
         width: 265px;
         margin-bottom: 0; /* Override default `<label>` margin */
         line-height: 1.5;
         color: #8E8E8E;
         border: 1px solid transparent;
         border-radius: 2px;
         transition: all .1s ease-in-out;
         box-sizing: border-box;
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
         align-items: center;
         justify-content: center;
         text-align: left;
         font-size: 12px;
         background-color: transparent;
        }
        
        .form-label-group input::-webkit-input-placeholder {
         color: transparent;
        }
        
        .form-label-group input:-ms-input-placeholder {
         color: transparent;
        }
        
        .form-label-group input::-ms-input-placeholder {
         color: transparent;
        }
        
        .form-label-group input::-moz-placeholder {
         color: transparent;
        }
        
        .form-label-group input::placeholder {
         color: transparent;
        }
        
        .form-label-group input:not(:placeholder-shown) {
         padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
         padding-bottom: calc(var(--input-padding-y) / 3);
        }
        
        .form-label-group input:not(:placeholder-shown) ~ label {
         padding-top: calc(var(--input-padding-y) / 3);
         padding-bottom: calc(var(--input-padding-y) / 3);
         font-size: 10px;
        }
        
        .form-control:focus {
         border-color: #A8A8A8;
         outline: none; 
        }
        
        .form-control {
         align-items: center;
         justify-content: center;
         height: 40px;
         width: 265px;
         border-radius: 2px;
         display: flex;
         flex-direction: column;
         box-sizing: border-box;
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
         cursor: text;
        }

        .full {
         display: grid;
         align-items: center;
         justify-content: center;
         height: 80px;
         font-size: 11px;
         font-weight: normal;
         text-decoration: none;
         text-align: center;
         width: 265px;
         color: #8E8E8E;             
        }
user_160837210
Related