如何使用不同的顏色來設定輸入欄位值的特定部分的樣式？

輸入欄位值的部分樣式

考慮輸入欄位以紅色顯示文本，但需要區分特定部分的場景本次調查以藍色為主題，探討了實現這種風格的可行性

答案：

不幸的是，CSS樣式統一應用於整個輸入元素，從而阻止了對特定部分的選擇性變更。

解：

為了規避此限制，採用多元素方法有必要將輸入欄位分為三個邏輯部分：

• 編輯點之前（未編輯部分）
• 編輯點（當前編輯部分）
• 編輯點之後（剩餘未編輯部分）

這種分割無法透過單次輸入實現元素，需要使用 JavaScript。

1. 初始標記：
   從標準的無樣式輸入元素開始。 JavaScript 將以設計為類似輸入欄位的風格化容器元素取代此輸入元素。
2. 動態包裝：
   實作 JavaScript 事件處理程序（例如，點擊、keydown、keyup）以明確三個部門。將這些部分包裝在合適的 HTML 元素（例如 ）中，並根據需要套用不同的樣式。

範例標記：

<div class="input">
  <span class="nonEdited before">foo</span>
  <span class="edited">fizz</span>
  <span class="nonEdited after">bar</span>
</div>

透過此方法，可以實現對輸入欄位值的特定部分進行樣式化的預期效果，同時保持輸入的可訪問性田野。

以上是如何使用不同的顏色來設定輸入欄位值的特定部分的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！