l'entrée et la sélection ont des positions verticales différentes dans la même ligne

Question

J'utilise des onglets flottants pour ce site Web. J'ai légèrement modifié le code pour mettre la saisie et la sélection sur une seule ligne. Dans la version Edge 114.0.1823.67 et la version Chrome 114.0.5735.199, la ligne de base a une position verticale différente. Dans Firefox version 115.0, la ligne de base a la même position verticale. Code :

@import url('https://fonts.google.com/specimen/Lato?selection.family=Lato');
 :root {
  --main-color: #ee6e73;
  --second-color: #333;
  --input-color: #9e9e9e;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Lato', sans-serif;
  background-color: #fcfcfc;
  flex-direction: column;
}

form {
  padding: 20px 40px;
}

form h1 {
  color: var(--second-color);
  letter-spacing: 1px;
  margin: 10px 0px;
}

.form-group {
  position: relative;
  padding: 20px 0;
  width: 300px;
  max-width: 100%;
}

.form-group input,
select {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--input-color);
  color: var(--second-color);
  font-size: 16px;
  padding: 10px 0;
  display: block;
  width: 100%;
}

.form-group label {
  color: var(--input-color);
  font-size: 16px;
  font-weight: 100;
  position: absolute;
  pointer-events: none;
  top: 0;
  transform: translateY(30px);
  transition: all 0.2s ease-in-out;
  left: 0px;
}

.form-group input:focus,
.form-group select:focus {
  border-bottom-color: var(--main-color);
  outline: none;
}

.form-group input:valid+label,
.form-group input:focus+label {
  color: var(--main-color);
  font-size: 14px;
  transform: translateY(0);
}

input[type="button"] {
  background-color: var(--main-color);
  border: 2px solid var(--main-color);
  border-radius: 2px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  padding: 15px 0;
  margin-top: 15px;
  width: 100%;
}

input[type="button"]:hover {
  background-color: #fff;
  color: var(--main-color);
}

input[type="button"]:active {
  border-color: #fff;
}

input[type="button"]:focus {
  outline: none;
}

<form>
  <h1>CSS Floating Labels</h1>
  <fieldset>
    <div style="display: flex; flex-direction: row; justify-content: flex-start;">
      <div class="form-group">
        <input type="text" required/>
        <label>Username</label>
      </div>
      <div class="form-group">
        <select>
          <option value="">Test</option>
        </select>
      </div>
      <div class="form-group">
        <input type="password" required/><label>Password</label>
      </div>
    </div>
  </fieldset>
  <input type="button" value="Submit" />
</form>

J'ai essayé de le résoudre avec vertical-position:bottom mais malheureusement sans succès.

Answer 1

select 因具有挑战性的样式而臭名昭著。话虽这么说，我更改了填充 - 可能甚至需要执行浏览器特定的样式，但在这里我只是更改了填充： padding: 1.225em 0; FWIW J'utilise em pour aider mon cerveau à traiter les choses plus facilement.

---

Mise à jour : Une alternative complètement différente à l'utilisation d'un ensemble de grilles, puisque nous voulons que le placement X et Y mette les étiquettes et les champs à la même position sur les lignes. Remarquez que j'ai nommé la ligne/colonne et que je l'ai utilisée. Certains wrappers et classes (je n'aime pas utiliser les balises d'élément dans les styles CSS afin que nous puissions changer le type d'élément sans avoir à changer le CSS)

• Faites le bouton

@import url('https://fonts.google.com/specimen/Lato?selection.family=Lato');
 :root {
  --main-color: #ee6e73;
  --second-color: #333;
  --input-color: #9e9e9e;
}

html,
body,
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
}

body {
  height: 100vh;
  /* assumed you want to super center the form */
  display: grid;
  /* same as center of both align/justify ref
https://developer.mozilla.org/en-US/docs/Web/CSS/place-items */
  place-items: center;
  font-family: 'Lato', sans-serif;
  background-color: #fcfcfc;
}

.form-form {
  padding-top: 1.25em;
  padding-bottom: 1.25em;
  padding-left: 1.5em;
  padding-right: 1.5em;
  display: grid;
  grid-template-columns: 1fr;
  /* fieldset takes whatever space is left over - 1fr */
  grid-template-rows: auto 1fr 1em auto;
  grid-template-areas: "formheader" "forminputs" "." "formbutton";
  align-items: center;
  border: solid cyan 1px;
  width: 100%;
}

.form-form .form-header {
  grid-area: formheader;
  color: var(--second-color);
  letter-spacing: 1px;
  margin-top: 0.625em;
  margin-bottom: 0.625em;
}

.fieldset-container {
  grid-area: forminputs;
  display: grid;
  grid-template-rows: 1fr;
  /* width of each field/column */
  grid-template-columns: repeat(3, 18.75em);
  border-bottom: 1px solid var(--input-color, #00FF00);
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
}

.form-group {
  padding-top: 1.25em;
  /*padding-bottom: 1.25em;*/
  display: grid;
  grid-template-columns: [only-one] 1fr;
  grid-template-rows: [form-things] auto 1fr;
  /* we COULD use the areas but we want to put them in the same line */
  grid-template-areas: "labels" "inputs";
}

.form-group .form-group-label {
  /* could also use the named line/row */
  grid-area: labels;
  padding-top: 1.25em;
  padding-bottom: 1.25em;
  color: var(--input-color);
  font-weight: 100;
  pointer-events: none;
  background-color: transparent;
}

.form-group .form-group-input {
  /* we named the line/column so use that not the "area" name */
  /*  grid-area: inputs;*/
  grid-row-start: form-things;
  grid-column-start: only-one;
  background-color: transparent;
  border: none;
  color: var(--second-color);
  padding-top: 1.25em;
  padding-bottom: 1.25em;
}

.form-group .form-group-input:focus,
{
  border-bottom-color: var(--main-color);
  outline: none;
}

.form-group .form-group-input:valid~label,
.form-group .form-group-input:focus~label {
  color: var(--main-color);
  font-size: 0.875em;
  transform: translateY(0);
}

.form-button {
  grid-area: formbutton;
  background-color: var(--main-color);
  border: 2px solid var(--main-color);
  /* made bigger as the 2px did not really show */
  border-radius: 0.5em;
  color: #fff;
  cursor: pointer;
  height: 3em;
  /* moved to grid as a row but not named area "."
 margin-top: 1em;*/
}

.form-button:hover {
  background-color: #fff;
  color: var(--main-color);
}

.form-button:active {
  border-color: #fff;
}

.form-button:focus {
  outline: none;
  border-color: #00FF00;
}

<form class="form-form">
  <h1 class="form-header">CSS Floating Labels</h1>
  <fieldset>
    <div class="fieldset-container">
      <div class="form-group">
        <input id="form-input-1" class="form-group-input" type="text" required/>
        <label for="form-input-1" class="form-group-label">Username</label>
      </div>
      <div class="form-group">
        <!-- <label class="form-group-label">TesterOut</label> -->
        <select class="form-group-input">
          <option value="">Test</option>
          <option value="water">Water</option>
          <option value="milk">Milk</option>
        </select>
      </div>
      <div class="form-group">
        <input class="form-group-input" type="password" required/><label class="form-group-label">Password</label>
      </div>
    </div>
  </fieldset>
  <button class="form-button" type="button">Submit</button>
</form>