l'entrée et la sélection ont des positions verticales différentes dans la même ligne-Questions et réponses sur le réseau chinois PHP

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

 CSS Floating Labels
     Username 
   
  Password

J'ai essayé de le résoudre avecvertical-position:bottommais malheureusement sans succès.

@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; }

répondre à tous (1)

P粉6775730792023-09-10 00:06:51 1 plancher

select因具有挑战性的样式而臭名昭著。话虽这么说，我更改了填充 - 可能甚至需要执行浏览器特定的样式，但在这里我只是更改了填充：padding: 1.225em 0;FWIW J'utiliseempour 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)