I am struggling with a textarea design issue. The placeholder is centered, but when I type more than one row of text, it gets cut off due to the padding. Removing the padding causes the placeholder to no longer be centered.
Is there a way to achieve both goals simultaneously?
<div class="container">
<textarea
value={body}
onChange={e => setBody(e.target.value)}
placeholder="Write a message"
onKeyPress={async event => {
if (event.key === "Enter") {
onSave(mutate);
}
}}
required
/>
</div>
.container {
display: flex;
flex-direction: row;
width: 100%;
height: 60px;
margin-bottom: 0px;
border-top: 1px solid grey;
}
textarea {
margin: 0px;
font-weight: normal;
font-size: 12px;
line-height: 16px;
font-family: ${props => props.theme.fonts.openSans};
border-radius: 7px;
padding: 16px;
padding-top: 20px;
box-shadow: none;
resize: none;
overflow-x: hidden;
overflow-y: scroll;
scrollbar-width: none;
box-sizing: content-box;
border: none;
border-right: 1px solid grey;
&::placeholder {
font-style: italic;
font-weight: light;
}
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #ff0000;
}
}