This is the 18th day of my participation in the August Genwen Challenge.More challenges in August

Author: battleKing warehouse: Github, CodePen blog: CSDN, nuggets feedback email: [email protected] Special statement: original is not easy, shall not be reproduced without authorization or plagiarism, if need to be reproduced can contact the author authorized

background

When we set up the form, we usually set some prompt text with input box to tell the user what to input here. At this time, according to the position of the prompt text, we generally have three design schemes.

  1. usePlaceholder = "Please enter username" 把 Prompt wordsSet in theInside the input box
    • Advantages: Space saving
    • Disadvantages: When we click the input box and want to enter text, the prompt text will disappear, poor user experience

Before getting the focus of the input box. PNG Get the focus of the input box. PNG

  1. The use of a<label> User name </label> 把 Prompt wordsSet in theTo the left of the input fieldorAbove the input box
    • Advantages: Prompt text is clear
    • Cons: Takes up a lot of space

  1. The use of a<label> User name </label> 把 Prompt wordsSet in theInside the input box
    • Advantages: When we click the input box and want to input text, it prompts the text to move up in a wavy manner, providing good user experience
    • Cons: Takes up a lot of space

Before getting the focus of the input box. PNG

Get the focus of the input box. PNG

becauseThe third kind ofBoth theFashion sense 和 practical, so it is widely used in many new enterprises

The final result

Add HTML files

  1. Add a layer of the outermost class nameform-control 的 <div>
  2. form-controlAdd a layer inside<input>
  3. form-controlAdd a layer inside<label>
<div class="form-control">
    <input type="text" required>
    <label>Email</label>
</div>
Copy the code

2. Add the CSS file

Initialize the page first

  1. Set up the* 为 box-sizing: border-box
  2. Set up thebodyKeep the whole project centered
* {
    box-sizing: border-box;
}

body {
    background-color: steelblue;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}
Copy the code

The main CSS code

.form-control {
    position: relative;
    margin: 20px 0 40px;
    width: 300px;
}

.form-control input {
    background-color: transparent;
    border: 0;
    border-bottom: 2px #fff solid;
    display: block;
    width: 100%;
    padding: 15px 0;
    font-size: 18px;
    color: #fff;
}

.form-control input:focus..form-control input:valid {
    outline: 0;
    border-bottom-color: lightblue;
}

.form-control label {
    position: absolute;
    top: 15px;
    left: 0;
    pointer-events: none;
}

.form-control label span {
    display: inline-block;
    font-size: 18px;
    min-width: 5px;
    transition: 0.3 s cubic-bezier(0.68, -0.55.0.265.1.55);
}

.form-control input:focus+label span..form-control input:valid+label span {
    color: lightblue;
    transform: translateY(-30px);
}
Copy the code

The core logic

  1. for.form-control input:focus+label span 和 .form-control input:valid+label spanAdd three properties
    • transform: translateY(-30px);Input box gets focus, prompt text up
    • color: #4158d0;When the input box gets focus, the font turns blue
  2. for.form-control labelAdd attributes
    • pointer-events: none;Prompt text does not prevent the input field from gaining focus
  3. for.form-control label spanAdd attributes
    • Transition: 0.3s cubic bezier(0.68, -0.55, 0.265, 1.55);Transition animation

Add JS files

The main logic

const labels = document.querySelectorAll('.form-control label')

labels.forEach(label= > {
    label.innerHTML = label.innerText
        .split(' ')
        .map((letter, idx) = > `<span style="transition-delay:${idx * 50}ms">${letter}</span>`)
        .join(' ')})Copy the code

❤️ thank you

If this article is helpful to you, please support it by clicking a “like”. Your “like” is my motivation for writing.

If you like this article, you can “like” + “favorites” + “forward” to more friends.