This is the 8th day of my participation in the August Text 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, the prompt text moves up, 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 namebox 的 <div>
  2. boxAdd another layer of class name insideinput_data 的 <div>
  3. input_dataAdd a layer inside<input>
  4. input_dataAdd a layer inside<label>
<div class="box">
    <div class="input_data">
        <input type="text" required>
        <label>Number</label>
    </div>
</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
* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(-135deg.#c850c0.#4158d0);
}
Copy the code

Main CSS code

.box {
    width: 450px;
    background: #fff;
    padding: 30px;
    box-shadow: 0 0 10px rgba(0.0.0.0.1);
}

.box .input_data {
    height: 40px;
    width: 100%;
    position: relative;
}

.box .input_data input {
    display: block;
    height: 100%;
    width: 100%;
    border: none;
    font-size: 16px;
    border-bottom: 2px solid silver;
}

.input_data input:focus..input_data input:valid {
    outline: 0;
    border-bottom-color: #4158d0;
}

.input_data input:focus~label..input_data input:valid~label {
    transform: translateY(-30px);
    font-size: 12px;
    color: #4158d0;
}

.box .input_data label {
    position: absolute;
    bottom: 10px;
    left: 0;
    color: grey;
    pointer-events: none;
    transition: all 0.3 s ease;
}
Copy the code

The core logic

  1. for.input_data input:focus~label 和 .input_data input:valid~labelAdd three properties
    • transform: translateY(-30px);Input box gets focus, prompt text up
    • font-size: 12px;When the input box gets focus, the font size becomes smaller
    • color: #4158d0;When the input box gets focus, the font turns blue
  2. for.box .input_data labelAdd two properties
    • pointer-events: none;Prompt text does not prevent the input field from gaining focus
    • 0.3 s help ease the transition: all;Transition animation

❤️ 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.