Can anyone help me with a formatting issue I'm facing? I want the text inside a textarea to appear exactly like the text inside a div element, including padding and other styles.
The code below seems to work fine on my Windows Chrome browser. However, when I check it on an actual iPhone (using Safari or Chrome, OS 10), there is extra space added inside the textarea, resembling left-padding even though it's set to 0. Any ideas on how I can remove this extra space?
(I didn't encounter this problem in iOS 9.)
<style>
.my_area{
margin: 0;
padding: 0;
outline: 0;
border: 0;
box-sizing: border-box;
white-space: pre-wrap;
word-wrap: break-word;
font-family: arial;
font-size: 17px;
line-height: 26px;
width: 200px;
overflow: hidden;
background: yellow;
border: 1px solid black;
border-radius: 0;
}
</style>
<textarea class = "my_area">q w e r t y u i o p a s d f g h j k l z x c v b n</textarea>
<br/>
<div class = "my_area">q w e r t y u i o p a s d f g h j k l z x c v b n</div>
Edit: I use
width=device-width, initial-scale=1.0
in the header so I'm viewing the page at proper resolution for mobile.