如何使用 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-Stylable：
整個元件可以透過 CSS 進行自訂。
• 可擴充：
它可以適應不同的螢幕尺寸和可用空間。

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