如何使用 CSS 將按鈕無縫整合到輸入欄位中？

如何使用CSS 在輸入欄位中整合按鈕

問題：

在使用者介面中，我們如何在輸入欄位中直觀地合併了一個按鈕，允許用戶與其無縫交互，無論欄位長度如何保持文字清晰度，確保正確的焦點操作，並保持可訪問性螢幕閱讀器？

答案：

要實現此效果，我們可以利用彈性盒佈局並將邊框放置在包含的表單周圍。透過實現彈性盒佈局，輸入和按鈕可以並排排列，輸入可以拉伸以佔據可用空間。隨後，可以刪除輸入的邊框以使其不可見，從而產生邊框包圍按鈕和輸入的錯覺。

實作：

以下程式碼片段展示程式碼實作：

<code class="css">form {
  display: flex;
  flex-direction: row;
  border: 1px solid grey;
  padding: 1px;
}

input {
  flex-grow: 2;
  border: none;
}

input:focus {
  outline: none;
}

form:focus-within {
  outline: 1px solid blue;
}

button {
  border: 1px solid blue;
  background: blue;
  color: white;
}</code>

<code class="html"><form>
  <input />
  <button>Go</button>
</form></code>

這樣做的好處方法：

• 這樣做的好處方法：
• 視覺整合：按鈕在視覺上位於輸入欄位內。
• 響應式設計：文字保留無論欄位長度如何都可見。
• 正確焦點指示： 焦點保持在父表單內。
• 輔助功能：螢幕閱讀器可以準確解釋表單結構。
• CSS 樣式： 整個組件可以透過以下方式自訂CSS。

可擴充：它可以適應不同的螢幕尺寸和可用空間。

以上是如何使用 CSS 將按鈕無縫整合到輸入欄位中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！