Floating label over-aligning the input text

Question

I am trying to create a floating label input field, i am able to achieve but on click of outside the input, the label text is over-aligning the input field. How could i make the label on the top when there is text or cursor active in input field.

Input.js

import React from "react";
import { FloatingContainer, FloatingInput, FloatingLabel } from "./style.js";

export const StyledFloatingInput = () => {
  return (
    <FloatingContainer>
      <FloatingInput />
      <FloatingLabel>Text</FloatingLabel>
    </FloatingContainer>
  );
};

style.js

import styled from "@emotion/styled";

export const FloatingContainer = styled.div`
  position: relative;
  margin-bottom: 20px;
  &::before,
  &::after {
    box-sizing: border-box;
  }
`;

export const FloatingInput = styled.input`
  font-size: 14px;
  padding: 4px 4px;
  display: block;
  width: 100%;
  height: 30px;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #757575;
  &:focus {
    outline: none;
    border-bottom: 2px solid #5264ae;
  }
  &:focus ~ label {
    top: -18px;
    font-size: 14px;
    color: #5264ae;
  }
`;

export const FloatingLabel = styled.label`
  color: #999;
  font-size: 14px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 5px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
`;

Here is the codesandbox what i have tried so far. Any help is appreciated

score 1 · Accepted Answer · answered Jun 01 '21 at 17:20

1

Add minLength="0" required to input and and use :valid selector in style.

&:focus ~ label,
&:valid ~ label {
  top: -18px;
  font-size: 14px;
  color: #5264ae;
}

Codesandbox

answered Jun 01 '21 at 17:20

doğukan

23,073
13
57
69

thanks @dogukan , without required is it possible ? – dev Jun 01 '21 at 17:21
I don't think it is possible with only html & css without js. – doğukan Jun 01 '21 at 17:22
If using js, how could i achieve it in react. I am new bie to this. What i am trying to create an input, select and date fields with this approach. So while starting for input itself faced this issue so could you let me know how to do with react js ? – dev Jun 01 '21 at 17:24
I don't know React but you can track the input value length and set a conditional class to input. So you can use something like this`&.isOkay ~ label` – doğukan Jun 01 '21 at 17:28
sure let me try it – dev Jun 01 '21 at 17:35
i was able to achieve thanks. I am new bie to this css also, i am learning css also, is there mail id i could connect for asking my small small doubts. – dev Jun 01 '21 at 17:42
What would be the right way to add a chevron icon the right of the input field ? – dev Jun 01 '21 at 17:50
you can ask another question for that – doğukan Jun 01 '21 at 20:10
Using positioning i was able to achieve thanks :) – dev Jun 02 '21 at 04:48
@ dogukan I had one doubt regarding on this question https://stackoverflow.com/questions/70063149/event-timeline-with-animation If you can help me on this it will be really helpful, many thanks – dev Nov 23 '21 at 10:56

score 1 · Answer 2 · answered Jun 01 '21 at 17:21

You need to target the :valid selector.

Example: https://codepen.io/seanstopnik/pen/a24ea5ebc5ba4dee84ff470d4d7e0e81

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  color: #1d364d;
  line-height: 1.6;
  padding: 60px;
}

::-moz-placeholder {
  color: #8f9d9d;
}

:-ms-input-placeholder {
  color: #8f9d9d;
}

::placeholder {
  color: #8f9d9d;
}

.form-item {
  position: relative;
  width: 360px;
  margin-bottom: 30px;
}

.label {
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
}

.input {
  width: 100%;
  height: 40px;
  font-size: 14px;
  border: 0;
  box-shadow: inset 0 -2px 0 0 #b8c1c1;
  background-color: #f0f4f4;
  padding: 0px 15px;
  outline: none;
  transition: all 0.2s ease-in-out;
}
.input:focus {
  box-shadow: inset 0 -2px 0 0 #256dd3;
}

.form-item--text .label {
  position: absolute;
  top: 0;
  left: 0;
  color: #8f9d9d;
  font-size: 14px;
  transition: all 0.2s ease-in-out;
  transform: translate(15px, 8px);
}
.form-item--text .form-item__border {
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 2px;
  border: 0;
  background-color: #256dd3;
  transform: scaleX(0);
  transition: all 0.2s ease-in-out;
}
.form-item--text .input:focus ~ .form-item__border {
  transform: scaleX(1);
}
.form-item--text .input:focus ~ .label, .form-item--text .input:valid ~ .label {
  color: #1d364d;
  font-size: 12px;
  transform: translate(0, -23px);
}

<div class="form-item form-item--text">
  <input id="input" class="input input--text" type="text" required>
  <label class="label" for="input">Name</label>
  <hr class="form-item__border">
</div>

Hi @Sean I had one doubt regarding on this question https://stackoverflow.com/questions/70063149/event-timeline-with-animation If you can help me on this it will be really helpful, many thanks — dev, Nov 23 '21 at 10:56

Floating label over-aligning the input text

2 Answers2