CSS 實現按鈕內嵌於輸入框（文本域）的方法

需求場景

類似聊天輸入框右側固定「發送」按鈕，需將按鈕視覺上置於 <textarea> 或 <input> 內部右側。

核心思路：相對定位 + 絕對定位

.input-wrapper {
    position: relative;
    display: inline-block;
}
.input-wrapper textarea {
    padding-right: 60px; /* 預留按鈕寬度 */
    box-sizing: border-box;
}
.input-wrapper button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    height: 30px;
    width: 50px;
}

HTML 結構

<div class="input-wrapper">
    <textarea placeholder="輸入內容..."></textarea>
    <button type="button">發送</button>
</div>

進階提示

• 若輸入框需自適應高度，配合 JS 動態調整 padding-right。
• 注意 z-index 確保按鈕在輸入框內容之上。