WordPress搜索输入字段的样式不正确

我有一个使用Twitter Bootstrap框架的WordPress网站。这里的网站：http://www.vickieats.com/WordPress搜索输入字段的样式不正确

我想风格的网站搜索形式非常类似于他们在他们的示例页面中使用的搜索表单（http://twitter.github.com/bootstrap/base-css.html#forms）。但是，搜索按钮的高度远远大于输入元素的高度，我的目标是使它们的高度相同。

我认为有一个CSS样式覆盖了我正在尝试做的事情，但是我已经使用了FireBug去死，并且找不到答案。或者它可能是我忽略的非常简单的事情。

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

来源

2012-11-05 Joseph

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

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

来源

2012-11-05 20:57:21 davidkonrad

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

来源

2012-11-05 18:56:39 coopersita

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

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

的问题是，这使得事情非常小，我会考虑做更大的投入，以配合可用性的按钮。

希望帮助，

尼克

来源

2012-11-05 19:14:56

我不知道哪种方式你周围，你希望它改变，所以这里的两个。

从引导CSS中的.btn类中删除'padding: 4px 14px;'和''，以使按钮与输入字段一样小。

使输入场更大，而不是匹配的按钮，从这个巨大的选择在引导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'

来源

2012-11-05 19:24:48

这是一个非常糟糕的主意编辑bootstrap.css文件的天色截图。如果想要改变基本的样式，只需要覆盖本地'

WordPress搜索输入字段的样式不正确

回答