Is there a way to get the text in an <input> to NOT be vertically aligned in the center of an <input>?
I am working on a form that has an <input> element inside of an <iframe>. The title and border around the input are added to make it look like the rest of the inputs, but the credit card input is fundamentally different than the rest of the inputs on the page. I have been asked to make it so this element doesn't look off when autofill is used in the browser like this:
This is happening because the browser or an extension is changing the teh background color of just the <input/> element.
I have managed to get it to look like this, but as you can see, the text is not aligned in the area it should be:
This is the CSS I am passing to the service that handles the iframe that contains the <input> in question.
width: calc(100% - 12px);
border-style: none;
padding: 0;
font-weight: ${iframeFontWeight};
font-size: 1rem;
font-family: ${iframeFontFamily};
background: ${iframeBackground};
color: ${iframeColor};
height: 48px;
padding-left: 12px;
border-radius: ${iframeBorderRadius};
I have tried adding padding to the top of the <input> which adds a vertical scroll and when the element is customized with a pill-shaped input (a requirement in this case), the border radius is not working as expected:
I have tried line-height (no effect) and position: absolute (same problem as padding-top).
Simple reproduction of this issue: https://codesandbox.io/s/youthful-snow-ygjgwx?file=/src/index.js
