可以將背景圖像添加到輸入字段的值中嗎？

我有一個看起來像這樣的輸入域：可以將背景圖像添加到輸入字段的值中嗎？

<input type="submit" value="CONTINUE" name="submit" class="submitButton">

有上，給它的紋理已經輸入的背景圖像，所以我要在不覆蓋原來的添加另一個背景圖像。

我有一個需要「繼續」後，並嘗試了一些方法，以獲取它的頁面上，包括在CSS屬性後添加到顯示的箭頭PNG：

input.submitButton:after{.....}

以及試圖把值放在值（值得一試），我不能讓它顯示。

有沒有辦法做到這一點，而不使用絕對定位？

來源

2013-03-07 Ben Tinsley

「位置：absolute'是，在我腦海中的唯一的事情。任何你想避免它的原因？ – 2013-03-07 16:30:52

如果有更直接的方法，我只是不想走那條路。謝謝！ – 2013-03-07 16:33:40

@MehrdadDastgir不需要，如果你想要的話，請參考我的回答:) – 2013-03-07 16:39:40

只使用<button>標籤

Fiddled here

HTML：

<button type="submit" name="submit" class="submitButton"> 
    Text inside button <span class="spanner">&rarr;</span> 
</button>

CSS：

.spanner { 
    background-color:red; 
    border-left:4px solid green; 
}

來源

2013-03-07 16:42:09

真棒，正是我在找的，謝謝！ – 2013-03-07 17:08:10

快樂是我的全部。（別客氣） – 2013-03-07 17:12:15

這應該做的一招：

input.submitButton{ 
    background: url(arrow.png) 50% 100%; 
}

來源

2013-03-07 16:30:41 Morpheus

哎呀，我忘了提及輸入字段本身已經有一個重複的背景圖片，所以添加第二個背景圖片只會覆蓋它。 – 2013-03-07 16:34:55

您可能必須設置箭頭背景+繼續

input.submitButton{ 
    /*background-color: transparent;*/ 
    background-image: url(arrow.png); 
    background-position: 50% 100%; 
    /*border: none; 
    width: ; 
    height: ;*/ 
    display: inline-block; 
    padding-right: ; 
}

，或者你可以使用一個position:absolute元素有一個箭頭。

來源

2013-03-07 16:38:33 madhushankarox

可以將背景圖像添加到輸入字段的值中嗎？

回答

相關問題