Ich verwende schwebende Tabs für diese Website. Ich habe den Code leicht geändert, um Eingabe und Auswahl in einer Zeile zusammenzufassen. In der Edge-Version 114.0.1823.67 und der Chrome-Version 114.0.5735.199 hat die Grundlinie eine andere vertikale Position. In der Firefox-Version 115.0 hat die Grundlinie dieselbe vertikale Position. 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; }
Ich habe versucht, es mitvertical-position:bottomzu lösen, aber leider ohne Erfolg.
select因具有挑战性的样式而臭名昭著。话虽这么说，我更改了填充 - 可能甚至需要执行浏览器特定的样式，但在这里我只是更改了填充：padding: 1.225em 0;FWIW我使用em来帮助我的大脑更轻松地处理事情。更新：使用一组网格的完全不同的替代方案，因为我们希望 X 和 Y 放置将标签和字段放在行上的同一位置。注意我命名了行/列并使用了它。 一些包装器和类（我不喜欢在 CSS 样式中使用元素标签，因此我们可以更改元素类型而不必更改 CSS）
@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; }