我使用此网站的浮动标签。 我稍微修改了代码,将输入和选择放在一行中。在 Edge 版本 114.0.1823.67 和 Chrome 版本 114.0.5735.199 中,基线具有不同的垂直位置。 在 Firefox 版本 115.0 中,基线具有相同的垂直位置。 代码:
@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>
我尝试用vertical-position:bottom
解决它,但不幸的是没有成功。
select
因具有挑战性的样式而臭名昭著。话虽这么说,我更改了填充 - 可能甚至需要执行浏览器特定的样式,但在这里我只是更改了填充:padding: 1.225em 0;
FWIW我使用em
来帮助我的大脑更轻松地处理事情。更新:使用一组网格的完全不同的替代方案,因为我们希望 X 和 Y 放置将标签和字段放在行上的同一位置。注意我命名了行/列并使用了它。 一些包装器和类(我不喜欢在 CSS 样式中使用元素标签,因此我们可以更改元素类型而不必更改 CSS)