让搜索栏变得更宽

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; 
}