讓搜索欄變得更寬

Question

我試圖在this網站上對搜索欄進行更廣泛的描述，但我一直在堅持如何去做。下面是代碼，

.searchform span .s { 
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0); 
    float: left; 
    font: bold 13px Arial,Helvetica,sans-serif; 
    padding: 6px; 
    width: 135px; 
} 

請指導我如何使搜索區域，如下圖中描繪的更廣泛，

Answer 1

在.searchform span .s，添加：

width: calc(100% - 20px); 

，然後擴展您的背景圖片span.searchfor適合。

Answer 2

你有兩個文件的style.css的width: 100px，覆蓋您width: 135px，背景爲「.searchfor」太小覆蓋旁邊135px

Answer 3

的問題是span.searchfor div有背景圖像

這是一個固定寬度的圖像，所以當您嘗試使輸入變得更長時，您看不到它。

快速修復將從圖像#f9faf8中獲取顏色，並將其應用於特定輸入並使其延長。

添加這對你的CSS文件將解決這個問題

.searchform span #sr { 
    width:170px; 
    background-color:#f9faf8; 
}