html - 使用 Zurb Foundation 创建大型输入文本的正确方法是什么

Question

我已经阅读了有关表单的文档，并且没有说明如何使输入文本变大。更大的意思是，例如 Grooveshark 之前的搜索框，具有更大的排版和尺寸：

我已经阅读了排版，但它谈到了标题、列表等。可能有一种方法可以将其应用于输入文本，但我对 Foundation 真的很陌生，我不知道正确的方法。我还看到，对于按钮，您可以使用相应的类“大”、“中”、“小”和“小”来控制它们的大小，但是如果我想让我的输入文本一样大怎么办按钮？

到目前为止，我有一个基本的输入表单如下：

<form> 
  <div class="row">
    <div class="ten mobile-three columns">
      <input type="text" placeholder="Type here what you want" />
    </div>
    <div class="two mobile-one columns">
      <a class="button expand postfix">Search</a>
    </div>
  </div>
</form>

谢谢。

Answer 1

根据 Foundation 的 UI 工具集，没有正确的方法。您必须将自己的 CSS 应用到 application.css 才能实现此目的。

例如：

input[type=text] {
    font-size: 24px;
}

请注意，这仅在此特定示例中有效，您需要向#id搜索输入元素添加一些内容，以免将此样式设置为所有输入文本。