使用HTML 建立帶有影像的輸入按鈕很簡單,但使用CSS 變更其外觀可以具有挑戰性。本文解決了使用 CSS 解決方案將圖像添加到輸入按鈕並修改其懸停時的外觀的問題。
有些使用者嘗試使用 CSS 來設定輸入按鈕的樣式形象,但面臨困難。他們可能嘗試定義自訂 CSS 類,但無法實現所需的懸停效果。
要使用CSS 為帶有圖像的輸入按鈕設定樣式,需要使用“type屬性。”將類型設為“type='submit'”,而不是“type ='image'」。這允許您使用 CSS 來控制按鈕的外觀。
<input type="submit">
設定按鈕後作為「提交」按鈕,您可以將 CSS 樣式套用到「myButton」類別來定義其外觀,包括新增圖片作為背景。
.myButton { background:url(/images/Btn.PNG) no-repeat; cursor:pointer; width: 200px; height: 100px; border: none; }
透過此方法,您可以使用「:hover」偽類修改按鈕懸停時的外觀。
.myButton:hover { background-color: #ff0000; }
此 CSS 解決方案允許使用圖像對輸入按鈕進行樣式和懸停效果,解決使用者面臨的問題。但要注意的是,Safari 可能不支援這種特定的樣式方法。在這種情況下,可能需要使用圖像和 onclick 函數來提交表單。
以上是如何使用 CSS 設定輸入按鈕圖像及其懸停效果的樣式?的詳細內容。更多資訊請關注PHP中文網其他相關文章!