Zurb foundation top bar search input - css

Question

I'm using zurb foundation 4.
I create a top bar with a search form within the same:
<nav class="top-bar">
<ul class="title-area">
<li class="name">
<h1>Title</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="has-form">
<form>
<div class="row collapse" >
<div class="small-10 columns">
<input type="text">
</div>
<div class="small-2 columns">
S
</div>
</div>
</form>
</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li class="has-dropdown">Drop1
<ul class="dropdown">
<li>Dropdown Level 3a</li>
<li>Dropdown Level 3b</li>
<li>Dropdown Level 3c</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown">Drop2
<ul class="dropdown">
<li>Dropdown Level 3a</li>
<li>Dropdown Level 3b</li>
<li>Dropdown Level 3c</li>
</ul>
</li>
</ul>
</section>
I need to increase the size in the search field without losing responsiveness. Does anyone have any idea how can I do?
http://cl.ly/image/1a412p3M3e1J

Answer 1

If you're using SASS, simply change:
input { height: $topbar-input-height }
To:
input { height: $topbar-height }
If you're using CSS, change the line with:
.top-bar input { height: 2.45em; }
To:
.top-bar input { height: 45px; }
Follow a similar process if you wish to change the width.

Answer 2

I am a big fan of CDN, so editing the Foundation files is not an option.
Here is the workaround that works for me:
.top-bar input {
height: auto !important;
padding-top: .35rem !important;
padding-bottom: .35rem !important;
}