Question

我有一个使用Twitter Bootstrap框架的WordPress网站。这是网站：http://www.vickieats.com/

我正在尝试为搜索表单设置样式，使其与他们在示例页面（http://twitter.github.com/bootstrap/base-css.html#forms）中使用的搜索表单非常相似。但是，搜索按钮的高度比输入元素大得多，我的目标是使它们的高度相同。

我认为有一种CSS风格凌驾于我想要做的事情上，但是我已经使用过FireBug而无法找到答案。或者它可能是我忽略的非常简单的事情。

无论哪种方式，任何帮助都表示赞赏。

Answer 1

您是否尝试过将其从type="search"更改为type="text"？我的猜测是搜索不可自定义，而文本是。

Answer 2

行高可防止简单的“高度”声明更改按钮的大小。我能够使用以下内容来调整按钮的大小：

.form-search .input-append .btn {
line-height: 10px;
}

问题是这使得事情变得非常小，我会考虑使输入更大以匹配可用性按钮。

希望有所帮助，

尼克

Answer 3

我不确定你希望它改变哪条路，所以这两者都是。

从引导程序CSS中的padding: 4px 14px;类中删除“line-height: 20px;”和“.btn”，使按钮与输入字段一样小。

要使输入字段更大以匹配按钮，请从bootstrap css中的大量选择器中删除'height: 20px;'：

'select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input'

Answer 4

将其添加到样式表（部分或文件）的末尾

input.search-query {
  line-height: 30px;
  padding: 5px;
  height: 30px;
}

在Chrome Inspector中添加此功能时，搜索框会与按钮对齐。你已经声明了input.search-query并不重要。看来你真的可以在CSS中清理，padding-right定义了不止一次，依此类推。

结果http://tinypic.com/view.php?pic=2lmtnht&s=6

的部分截图

WordPress搜索输入字段没有正确样式

4 个答案: