Chrome Align-items: Baseline For Select And Input Elements
I have built a form using flex box and it works beautifully in Firefox, Edge and IE11. Unfortunately in Chrome the text in the spans isn't aligning consistently. It is fine if foll
Solution 1:
It's because of align-items: baseline;
. Instead use align-items: center;
Here is the updated codepen
form,
fieldset {
display: flex;
flex-direction: column;
}
label {
display: flex;
align-items: center;
flex-direction: row;
justify-content: flex-start;
padding: .3rem0;
flex-wrap: wrap;
}
fieldsetspan {
text-align: right;
padding: 01rem00;
}
input,
select,
textarea {
padding: .5rem;
}
<form><fieldset><label><span>Label</span><inputtype="text" /></label><label><span>Label</span><select><optionvalue=""selected=""disabled=""></option><optionvalue="Mr">Mr</option><optionvalue="Dr">Dr</option><optionvalue="Miss">Miss</option><optionvalue="Mrs">Mrs</option><optionvalue="Ms">Ms</option><optionvalue="Ms">Mx</option><optionvalue="Other">Other</option></select></label></fieldset></form>
Solution 2:
You need to add placeholder=" "
to your inputs and they will align perfectly.
Post a Comment for "Chrome Align-items: Baseline For Select And Input Elements"