I use floating tags for this website. I modified the code slightly to put the input and selection in one line. In Edge version 114.0.1823.67 and Chrome version 114.0.5735.199, the baseline has a different vertical position. In Firefox version 115.0, the baseline has the same vertical 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; }
<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>
I tried to solve it with vertical-position:bottom
but unfortunately without success.
select
Notorious for challenging styles. That being said, I changed the padding - it may even be necessary to do browser specific styling, but here I just changed the padding:padding: 1.225em 0;
FWIW I useem
to help my brain process things easier.Update: A completely different alternative using a set of grids, since we want the X and Y placement to put the labels and fields in the same position on the rows. Notice I named the row/column and used it. Some wrappers and classes (I don't like using element tags in CSS styles so we can change the element type without having to change the CSS)