所有瀏覽器都帶有背景圖像的樣式HTML表單

我正在創建一個在後臺具有圖像的HTML表單。目前，它只能在某些瀏覽器中正確排列，而在其他瀏覽器中則只有幾個像素關閉。所有瀏覽器都帶有背景圖像的樣式HTML表單

我認爲下面的CSS會解決我的問題，它有幫助，但它沒有解決問題。

input { 
width: 105px;  
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */  
-moz-box-sizing: border-box; /* Firefox, other Gecko */  
box-sizing: border-box;   /* Opera/IE 8+ */ 
}

此外，所有表單輸入都是浮動的，並帶有邊距。

來源

2012-05-08 Mike George

如果圖像是靜態的大小，你可能會考慮將其設置爲容器與position:relative;背景，然後用position:absolute;與top:，left:，right:和bottom:的位置和大小。現在

來源

2012-05-08 17:03:03

我改變造型的這種方法，但形式仍然是關閉在Internet Explorer和Firefox，它在Chrome瀏覽器中看起來很棒 –

用CSS瀏覽器選擇「.gecko＃mc-embedded-subscribe」可以正常工作在FireFox中 –

.searchBox{ 
    background-image:url('images/magnifying-glass.gif'); 
    background-repeat:no-repeat; 
    padding-left:20px; 
}

，我們只是我們的輸入變量分配給CSS類「搜索框」：

<input type="text" name="search" class="searchBox">

來源

2012-05-08 17:03:19

這不是我正在尋找的東西，我已經在後臺映像了，表單元素只是定位在不同瀏覽器中有所不同。而通過表單背景，我的意思是背後的圖像是在多個輸入背後，而不是在實際輸入字段中的圖標。 –

所有瀏覽器都帶有背景圖像的樣式HTML表單

回答

相關問題