0

I am trying to create an animation for form textfield and label. I want to be able to change the position of LabelText to top of the TextBox component. Please let me know what I am missing on, My entered text and label are overlapping i.e. label is not animated. Request help!

Styled components:

export const TextBox = styled.input`
  display: flex;
  width: 100%;
  height: 2em;
  border-radius: 5px;
  border: none;
  background: ${styles.backgroundGradient};
`;

export const LabelText = styled.label`
  position: absolute;
  top: 0;
  left: 0;
  font-size: 18px;
  line-height: 16px;
  pointer-events: none;
  transition: 0.5s;
  color: ${styles.formContentColor};
  ${TextBox}:focus ~ &,
  ${TextBox}:not([value=""]) ~ & {
    top: -1.5em;
    left: 0;
    color: ${styles.formContentColor};
    font-size: 20px;
  }
`;

export const InputWrapper = styled.div`
  position: relative;
  width: 60%;
`;

Order of placement in components

        <InputWrapper>
          <LabelText>Product Name</LabelText>
          <TextBox type="text" />
        </InputWrapper>
  • Please create a sandbox with your code. – Monzoor Tamal Jul 20 '20 at 16:03
  • 1
    https://codesandbox.io/s/pensive-water-pojf8?file=/src/StyledComponents/FormInputStyles/index.js –  Jul 20 '20 at 16:05
  • I think that `[value=""]` doesn't cover all. See the pen: https://codepen.io/moshfeu/pen/mdVqJKd ([explanation](https://www.linkedin.com/posts/moshfeu_css-tip-materialdesign-activity-6683766100368355330-0FER)) – Mosh Feu Jul 20 '20 at 16:05
  • Hi Monzoor here is the link.. I am working on product details section –  Jul 20 '20 at 16:05

1 Answers1

0

I read through comment by @mosh feu and other answers on stackoverflow.

Detect if an input has text in it using CSS -- on a page I am visiting and do not control?

There are couple of approaches that can serve the purpose i.e. to check whether input field is empty or not drafting them below for future refrrence.

  1. input:not(:placeholder-shown):
  2. input:not([value=""]):

In my case input is value of TextBox.

export const LabelText = styled.label`
  position: absolute;
  top: 1.5em;
  left: 0;
  font-size: 18px;
  line-height: 16px;
  pointer-events: none;
  transition: 0.6s;
  color: ${styles.formContentColor};
  ${TextBox}:focus ~ &,
  ${TextBox}:not(:placeholder-shown) ~ & {
    top: 0;
    left: 0;
    color: ${styles.formContentColor};
    font-size: 16px;
  }
`;