Css 如何将样式更改为搜索txt

我使用的是wordpress模板，搜索按钮有问题。我的页面上有2个搜索小部件。1小部件正常。它是240x25px，搜索区域为190x25px，工作正常。但是第二个小部件是960x25px，但是搜索区域也是190x25px。我可以在style.css中更改搜索区域，但如果我更改为900px，第一个小部件将变得疯狂。我有文本“szukaj tutaj”，意思是“在这里搜索”，如果我将宽度更改为900px，测试将在第一个搜索小部件下进行

/*------------------------------ SEARCH ------------------------------*/
#s {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    color: #818181;
    float: left;
    height: 25px;
    line-height: 25px;
    width: 190px;
}

.searchbtn {
    height: 25px;
    margin-right: 0;
    width: 25px;

这是第一个和第二个搜索小部件

---

您可以使用

%

根据容器大小调整

输入

.searchform .searchtxt {
    width: 90%;
}

当然，90%并不准确。由于
div.searchform
有两个子项，即
input
和
submit
按钮，因此不能对
输入使用
宽度：100%
。如果您可以根据自己的需要使用
calc（）
，我建议使用以下更精确的代码：

.searchform .searchbtn {
    width: 30px; /* I don't know the searchbtn size, look for it in your CSS. */
}

.searchform .searchtxt {
    width: calc(100% - 50px); /* 30px from the .searchbtn size + 20px for input padding (10px each side). */
}

嗯，我在样式css部分（pic:puu.sh/nJXKQ/708b435297.png）将其添加到我的搜索小部件中，但它没有改变任何东西：/你还有其他想法吗？你的
#s{…}
中的样式更具体，因为它是一个id选择器。因此，我显示的类选择器被覆盖。当然，按id选择通常不是一个好主意。阅读更多关于如何更好地理解你的风格。我还是不明白。。我把它放在我的css:puu.sh/ofr1x/08c1267182.png中，但搜索区域仍然是一样的，但其他一切都更糟糕。搜索按钮太近了。伙计，你真的需要像我建议的那样“了解更多”。你的CSS仍然有
#id
样式设置，与
.classes
样式设置格格不入。