在输入标签顶部放置一个标签

Question

如何将标签放置在输入标签的顶部，默认情况下，它位于输入标签内部，当我点击它时，它跳到输入标签的顶部，

这是我的尝试：

input { 
 
    font-size: 18px; 
 
    padding: 10px 10px 10px 5px; 
 
    -webkit-appearance: none; 
 
    display: block; 
 
    background: #fafafa; 
 
    color: #636363; 
 
    width: 100%; 
 
    border: none; 
 
    border-radius: 0; 
 
    border-bottom: 1px solid #757575; 
 
} 
 
input:focus { 
 
    outline: none; 
 
} 
 
/* Label */ 
 

 
label { 
 
    color: #999; 
 
    font-size: 18px; 
 
    font-weight: normal; 
 
    position: absolute; 
 
    pointer-events: none; 
 
    left: 5px; 
 
    top: 10px; 
 
    -webkit-transition: all 0.2s ease; 
 
    transition: all 0.2s ease; 
 
} 
 
/* active */ 
 

 
input:focus ~ label, 
 
input.used ~ label { 
 
    top: -20px; 
 
    -webkit-transform: scale(.75); 
 
    transform: scale(.75); 
 
    left: -2px; 
 
    /* font-size: 14px; */ 
 
    color: #000; 
 
} 
 
/* Underline */ 
 

 
.bar { 
 
    position: relative; 
 
    display: block; 
 
    width: 100%; 
 
} 
 
.bar:before, 
 
.bar:after { 
 
    content: ''; 
 
    height: 2px; 
 
    width: 0; 
 
    bottom: 1px; 
 
    position: absolute; 
 
    background: #4a89dc; 
 
    -webkit-transition: all 0.2s ease; 
 
    transition: all 0.2s ease; 
 
} 
 
.bar:before { 
 
    left: 50%; 
 
} 
 
.bar:after { 
 
    right: 50%; 
 
} 
 
/* active */ 
 

 
input:focus ~ .bar:before, 
 
input:focus ~ .bar:after { 
 
    width: 50%; 
 
} 
 
/* Highlight */ 
 

 
.highlight { 
 
    position: absolute; 
 
    height: 60%; 
 
    width: 100px; 
 
    top: 25%; 
 
    left: 0; 
 
    pointer-events: none; 
 
    opacity: 0.5; 
 
} 
 
/* active */ 
 

 
input:focus ~ .highlight { 
 
    -webkit-animation: inputHighlighter 0.3s ease; 
 
    animation: inputHighlighter 0.3s ease; 
 
}

<div class="group"> 
 
    <input type="text" name="name" placeholder="" readonly> 
 
    <span class="highlight"> 
 
     </span><span class="bar"></span> 
 
    <label>FULLNAME</label> 
 
</div>

请我如何可以将标签上的输入标签的顶部永久。在它被放置在输入标签并点击它的那一刻，就跳转到标记的顶部

Answer 1

你可以尝试像

<form name="message" method="post"> 
 
    <section> 
 
    <div> 
 
     <label for="name">Name</label> 
 
     <input id="name" type="text" value="" name="name"> 
 
    </div> 
 
    <div> 
 
     <label for="email">Email</label> 
 
     <input id="email" type="text" value="" name="email"> 
 
    </div> 
 
    </section> 
 
    <section> 
 
    <div> 
 
     <label for="subject">Subject</label> 
 
     <input id="subject" type="text" value="" name="subject"> 
 
    </div> 
 
    <div class="full"> 
 
     <label for="message">Message</label> 
 
     <input id="message" type="text" value="" name="message"> 
 
    </div> 
 
    </section> 
 
</form>