input and select have different vertical positions in the same line-PHP Chinese Network Q&A

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

 CSS Floating Labels
     Username 
   
  Password

I tried to solve it withvertical-position:bottombut unfortunately without success.

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

reply all (1)

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

selectNotorious 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 useemto 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)