如何使用 CSS 在輸入欄位中嵌入圖示？

將圖示放置在輸入元素中

將圖示嵌入到表單的輸入欄位中可以提升其美觀性和可用性。為了實現這一目標，讓我們研究一下引用網站所採用的技術。

背景圖片和填充

這種方法利用 CSS 來欺騙瀏覽器顯示圖示。它使用background-image和background-position等屬性將背景影像合併到輸入元素中。

同時，程式碼修改輸入的padding-left值以移動遊標位置，確保它不會重疊與圖示。因此，圖示出現在輸入欄位中，同時為使用者輸入留出空間。

範例程式碼：

上述網站實作了以下CSS 法則來實現此效果：

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;

在此範例中，使用名為comment-author.gif 的背景圖像作為圖標，位置距左側和頂部7 個像素輸入元素的。 30 像素的 padding-left 值將遊標向右推，為文字輸入提供了充足的空間。

透過結合這些 CSS 技巧，可以將圖示無縫整合到輸入元素中，增強視覺吸引力和表單的使用者體驗。

以上是如何使用 CSS 在輸入欄位中嵌入圖示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！