调整textbox尺寸后文本位置异常，求HTML/CSS修复方案

问题原因 #

你当前使用的<input type="text">是单行输入控件，仅支持输入单行短文本，就算手动设置了很大的高度，输入的文字也只会固定在单行位置展示，无法适配大尺寸文本框的显示需求。

修复方案 #

把单行输入框替换为多行文本控件<textarea>即可，同时补充边框属性的完整写法避免边框不生效，修改后的代码如下：

CSS代码 #

body {
    background-color: grey;
}

#myquestion {
    background-color: white;
    border-radius: 1.3mm;
    /* 补充边框的宽度和样式，原写法仅设置颜色不会生效 */
    border-top: 1px solid grey;
    border-left: 1px solid grey;
    border-right: none;
    border-bottom: none;
    height: 70mm;
    width: 100mm;
    /* 可选：加内边距让文字不要贴边，显示更美观 */
    padding: 8px;
    /* 可选：关闭右下角默认的拉伸控件，避免尺寸被用户改动 */
    resize: none;
    }

#mybutton {
    background-color: lightblue;
    border-radius: 1.3mm;
    border-right: 1px solid grey;
    border-bottom: 1px solid grey;
    border-top: none;
    border-left: none;
    /* 可选：加内边距让按钮文字更美观 */
    padding: 6px 12px;
}

HTML代码 #

<label>Enter your question:</label><br>
<!-- 把input替换为textarea标签 -->
<textarea id="myquestion"></textarea><br>
<button type="button" id="mybutton">Submit</button>

修改后文本内容会默认从左上角开始输入，支持自动换行，和你需要的预期效果一致。

内容的提问来源于stack exchange，提问作者Blue Duck