我在聚焦或选择输入时如何使输入标签褪色，也可以使标签位于输入内部？

Question

我正在这里做两件事： 1）我希望在选择输入时将标签更改为浅灰色。但是，我不能让所有标签都改变颜色。

2）我想将标签放在输入中。但是，我比第一个更担心第一个，因为实施第二个会抵消我认为的第一个。但是，知道如何将标签放置在输入中会很高兴。

我正在使用CSS input：focus〜label方法，但是，这只是在输入之后选择标签，而我在输入之前有标签，因此第一个标签不能用于淡入淡出。 选择输入后，如何获取所有标签以更改颜色？我知道我需要在输入之后移动标签，如果这样做，标签将显示在输入下方，而不是应该去的地方。 我已经尝试过位置：在标签上是绝对的，但它只是将它们捆在一起，所以我不确定如何分别移动它们。

这是我的密码笔的链接，我有两种联系方式，一种用div分隔，另一种则没有。

https://codepen.io/RJorns/pen/MdmoRp

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">


<div class="contact-wrapper">
    <div class="contact-title"><h1>Contact</h1></div>
    <form class="contact-form ui equal width form">
      <div class="form-wrapper">
        <label class="form-label">Name</label>
        <input class="form-input" id="name" type="text" placeholder="Name" required>
      </div>
      <div class="form-wrapper">
        <label class="form-label">Email</label>
            <input class="form-input" id="email" type="text" placeholder="Email" required>
      </div>
      <label class="form-label">Message</label>
      <div class="field">
        <textarea rows="4" id="message" type="text" required></textarea>
      </div>
      <button id="submit" class="ui grey button">Submit</button>
    </form>
  </div>

<div class="contact-wrapper">
    <div class="contact-title"><h1>Contact</h1></div>
    <form class="contact-form ui equal width form">
        <label class="form-label">Name</label>
        <input class="form-input" id="name" type="text" placeholder="Name" required>
        <label class="form-label">Email</label>
            <input class="form-input" id="email" type="text" placeholder="Email" required>
      <label class="form-label">Message</label>
      <div class="field">
        <textarea rows="4" id="message" type="text" required></textarea>
      </div>
      <button id="submit" class="ui grey button">Submit</button>
    </form>
  </div>




* {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      -webkit-font-smoothing: antialiased;
      text-align: center;
    }

    /* Contact */

    .contact-wrapper {
      margin: 0 auto;
      max-width: 75%;
    }

    .contact-title {
      margin-bottom: 2em;
    }

    .contact-form {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: center;
      align-content: center;
    }

    input {
      box-shadow: inset 0px 0px 13px -1px rgba(77, 77, 77, 1);
    }

    .form-label {
      display: flex;
      color: #515151;
    }

    input:focus ~ label {
      color: #a0a0a0;
    }

    button {
      margin-top: 5em;
    }

我希望所有标签在聚焦时都显示为浅灰色。 我只想使用CSS，但是如果我必须使用JS，那就很好。

Answer 1

我只是将label从css移到了标签部分的输入之后，并使用反向列将标签移到了顶部。还添加了关于输入焦点的过渡。我希望这会起作用。评论以获得更多信息。

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    text-align: center;
}


/* Contact */

.contact-wrapper {
    margin: 0 auto;
    max-width: 75%;
}

.contact-title {
    margin-bottom: 2em;
}

.contact-form {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

input {
    box-shadow: inset 0px 0px 13px -1px rgba(77, 77, 77, 1);
}

.form-label {
    display: flex;
    color: #515151;
    transition: all 0.4s ease-in;
}

input:focus ~ label {
    color: #a0a0a0;
    transition: all 0.4s ease-in;
}

.form-wrapper {
    display: flex;
    flex-direction: column-reverse;
}

button {
    margin-top: 5em;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">

<div class="contact-wrapper">
    <div class="contact-title">
        <h1>Contact</h1></div>
    <form class="contact-form ui equal width form">
        <div class="form-wrapper">
            <input class="form-input" id="name" type="text" placeholder="Name" autocomplete="off" required>
            <label class="form-label">Name</label>
        </div>
        <div class="form-wrapper">
            <input class="form-input" id="email" type="text" placeholder="Email" autocomplete="off" required>
            <label class="form-label">Email</label>
        </div>
        <label class="form-label">Message</label>
        <div class="field">
            <textarea rows="4" id="message" type="text" required></textarea>
        </div>
        <button id="submit" class="ui grey button">Submit</button>
    </form>
</div>

<div class="contact-wrapper">
    <div class="contact-title">
        <h1>Contact</h1></div>
    <form class="contact-form ui equal width form">
        <div class="form-wrapper">
            <input class="form-input" id="name" type="text" placeholder="Name" autocomplete="off" required>
            <label class="form-label">Name</label>
        </div>
        <div class="form-wrapper">
            <input class="form-input" id="email" type="text" placeholder="Email" autocomplete="off" required>
            <label class="form-label">Email</label>
        </div>
        <label class="form-label">Message</label>
        <div class="field">
            <textarea rows="4" id="message" type="text" required></textarea>
        </div>
        <button id="submit" class="ui grey button">Submit</button>
    </form>
</div>