在輸入元素內設定按鈕樣式

將按鈕放置在輸入元素內需要仔細考慮，以確保正確的功能和可訪問性。現代 CSS 提供了一個靈活的解決方案來實現這種設計。

使用 Flexbox 佈局，我們可以在容器（例如表單）內水平排列輸入和按鈕。輸入應該有足夠的空間來增長（flex-grow），而按鈕可以保持固定大小。

為了在輸入的邊界內顯示按鈕，我們從輸入中刪除邊框，使其成為視覺上顯示為容器邊框的一部分。這允許輸入正常運行，而沒有任何文字阻礙按鈕。

當輸入獲得焦點時，我們將輪廓移到容器本身。這可確保焦點指示包含輸入和按鈕，從而提高可訪問性和視覺一致性。在按鈕和容器中添加樣式進一步增強了設計。

透過使用 Flexbox 並操作輪廓，我們可以將按鈕無縫整合到輸入元素中，同時保留使用者互動、可存取性和樣式選項。