因此，我可以使用創建帶有圖像的輸入按鈕<INPUT type="image" src="/images/Btn.PNG" value="">但是，使用CSS無法獲得相同的行為。例如，我嘗試過<INPUT type="image" class="myButton" value="">其中“ myButton”在CSS文件中定義為.myButton { background:url(/images/Btn.PNG) no-repeat; cursor:pointer; width: 200px; height: 100px; border: none;}如果這只是我想做的，則可以使用原始樣式，但是我想更改懸停時按鈕的外觀（使用myButton:hover類）。我知道鏈接很好，因為我已經能夠將它們加載為頁面其他部分的背景圖像（僅作為檢查）。我在網上找到了使用JavaScript進行操作的示例，但我正在尋找CSS解決方案。我正在使用Firefox 3.0.3，如果有幫助的話。
4 回答
繁花不似錦
TA貢獻1851條經驗 獲得超4個贊
如果要使用CSS為按鈕設置樣式，請將其設置為type =“ submit”按鈕，而不是type =“ image”。type =“ image”需要一個SRC，您無法在CSS中設置它。
請注意，Safari不允許您以所需的方式設置任何按鈕的樣式。如果需要Safari支持，則需要放置圖片并具有提交表單的onclick函數。
達令說
TA貢獻1821條經驗 獲得超6個贊
的HTML
<div class="myButton"><INPUT type="submit" name="" value=""></div>
的CSS
div.myButton input {
background:url(/images/Btn.PNG) no-repeat;
cursor:pointer;
width: 200px;
height: 100px;
border: none;
}
即使在Safari中也可以在任何地方使用。
烙印99
TA貢獻1829條經驗 獲得超13個贊
本文有關CSS圖像替換提交按鈕的文章可能會有所幫助。
“使用這種方法，當樣式表處于活動狀態時，您將獲得一個可點擊的圖像，而當樣式表處于關閉狀態時，將獲得一個標準按鈕。訣竅是將圖像替換方法應用于按鈕標簽，并將其用作提交按鈕，而不是使用的輸入。
而且，由于按鈕的邊界被擦除，這也是可推薦的變化的按鈕光標形一個用于鏈接的手，因為這提供了一個可視前端到用戶“。
CSS代碼：
#replacement-1 {
width: 100px;
height: 55px;
margin: 0;
padding: 0;
border: 0;
background: transparent url(image.gif) no-repeat center top;
text-indent: -1000em;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
#replacement-2 {
width: 100px;
height: 55px;
padding: 55px 0 0;
margin: 0;
border: 0;
background: transparent url(image.gif) no-repeat center top;
overflow: hidden;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
form>#replacement-2 { /* For non-IE browsers*/
height: 0px;
}
- 4 回答
- 0 關注
- 476 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消