css - 如何在 HTML/CSS 中同时对标签和文本框应用缩放过渡？

Question

我尝试了 HTML 中的表单，我想同时在标签和文本框上悬停缩放过渡，就像我将光标放在标签上然后标签和文本框都缩放一样。我尝试了很多代码和 YouTube。我可以将两者分别悬停，但我不知道如何同时缩放。任何人都可以有任何编码想法。

这是 html 代码:上面是 css 代码，请检查这两个代码，因为如果我在标签上激活光标，我想同时悬停，那么标签和文本区域都将被缩放我尝试了很多选项，但我没有得到答案。如果有人帮助我，因为这是我的大学作业，我很难坚持下去，请我快速回答

label {
  transform: 56px;
  font-width: 180px;
  display: inline-block;
  text-align: right;
  text-align: top;
}
label:hover {
  font-size: 40px;
}
input:hover {
  font-size: 40px;
}
#preview {
  margin-top: 8.5px;
  margin-left: 5px;
  width: 20%;
}
fieldset {
  background-color: lightyellow;
  border: 10px solid yellow;
  margin-bottom: 10px;
  width: 600px height: 900px;
}

<form>
  <h1>PLEASE ENTER YOUR DETAIL FOR OUR DATING SITE</h1>
  <fieldset>
    <legend>YOUR FACE</legend>
    <label>YOUR IMAGE</label>
    <input type="file" id="avatar" name="avatar" required>
    <br>
    <label>image preview:</label>
    <img id="preview">
  </fieldset>
  <fieldset>
    <legend>YOUR GENERAL DETAIL</legend>
    <label>NAME</label>
    <input type="text" name="name">
    <br>
    <br>
    <label>Gender</label>
    : Male
    <input type="radio" width="180px">Female
    <input type="radio">
    <br>
    <br>
    <label>Age:</label>
    <input type="number" width="180px">
    <br>
    <br>
    <label>Date of birth:</label>
    <input type="date" width="180px">
    <br>
    <br>
    <label>Favourite color:</label>
    <input type="color" width="180px">
    <br>
    <br>
    <label>Which country:</label>
    <select required width="180px">
      <br>
      <option value="">None</option>
      <option>America</option>
      <option>Pakistan</option>
      <option>Egypt</option>
      <option>Turkey</option>
      <option>China</option>
      <option>Japan</option>
      <br>
    </select>
  </fieldset>
  <fieldset>
    <legend>Your indicators</legend>
    <br>
    <label>Height:</label>
    Short
    <input type="range" min="0" max="100" ;>Tall
    <br>
    <br>
    <label>Salary:Poor</label>
    <input type="range" min="0" max="100">Rich
    <br>
  </fieldset>
  <fieldset>
    <legend>Your Contact Information</legend>
    <label>Email:</label>
    <input type="email" style="width:180;">
    <br>
    <br>
    <label>Mobile:</label>
    <input type="tel " width="180px ">
    <br>
    <br>
    <label>Address:</label>
    <textarea></textarea>
    <br>
    <br>
    <label>Method to contact you:</label>
    <input type="checkbox " ; width="auto ">
    <label>Email</label>
    <input type="checkbox ">
    <label>Whatsapp</label>
    <input type="checkbox ">
    <label>In-appchat</label>
    <input type="checkbox ">
  </fieldset>
  <input type="submit " value="Submit ">



  <script src="https://www.cse.ust.hk/~rossiter/dating_web_site.js "></script>
</form>

Answer 1

简单地包装<label> <input>周围.

<label>TEXT
  <input>
</label>

片段

label {
  transform: 56px;
  width: 180px;
  display: inline-block;
  text-align: right;
  text-align: top;
}
label:hover, label:focus {
  font-size: 40px;
}

input:hover, label:focus {
  font-size: 40px;
}
#preview {
  margin-top: 8.5px;
  margin-left: 5px;
  width: 20%;
}
fieldset {
  background-color: lightyellow;
  border: 10px solid yellow;
  margin-bottom: 10px;
  width: 600px height: 900px;
}

<form>
  <h1>PLEASE ENTER YOUR DETAIL FOR OUR DATING SITE</h1>
  <fieldset>
    <legend>YOUR FACE</legend>
    <label>YOUR IMAGE
      <input type="file" id="avatar" name="avatar" required>
    </label>
    <br>
    <label>image preview:</label>
    <img id="preview">
  </fieldset>

  <fieldset>
    <legend>YOUR GENERAL DETAIL</legend>
    <label>NAME
      <input type="text" name="name">
    </label>
    <br>
    <br>
    <label>Gender : Male
      <input type="radio">
    </label>
    <label>
      Female
      <input type="radio">
    </label>
    <br>
    <br>
    <label>Age:
      <input type="number" width="180px">
    </label>
    <br>
    <br>
    <label>Date of birth:
      <input type="date" width="180px">
    </label>
    <br>
    <br>
    <label>Favourite color:
      <input type="color" width="180px">
    </label>
    <br>
    <br>
    <label>Which country:
    <select required width="180px">
      <br>
      <option value="">None</option>
      <option>America</option>
      <option>Pakistan</option>
      <option>Egypt</option>
      <option>Turkey</option>
      <option>China</option>
      <option>Japan</option>
      <br>
    </select>
      </label>
  </fieldset>
  <fieldset>
    <legend>Your indicators</legend>
    <br>
    <label>Height:
    Short
    <input type="range" min="0" max="100" ;>Tall</label>
    <br>
    <br>
    <label>Salary:Poor
    <input type="range" min="0" max="100">Rich</label>
    <br>
  </fieldset>
  <fieldset>
    <legend>Your Contact Information</legend>
    <label>Email:
      <input type="email" style="width:180;">
    </label>
    <br>

    <br>
    <label>Mobile:
      <input type="tel " width="180px ">
    </label>
    <br>
    <br>
    <label>Address:</label>
    <textarea></textarea>
    <br>
    <br>
    <label>Method to contact you:
      <input type="checkbox " width="auto">
    </label>
    <label>Email
      <input type="checkbox ">
    </label>

    <label>Whatsapp
      <input type="checkbox ">
    </label>
    <label>In-appchat
      <input type="checkbox ">
    </label>
  </fieldset>
  <input type="submit " value="Submit ">



  <script src="https://www.cse.ust.hk/~rossiter/dating_web_site.js "></script>
</form>