使搜索栏更广泛

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