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

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

你可以试试像

这样的东西

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;