Foundation
Home

Rounded Input Group

By Rafi

F6

search form

How do I use This?

A rounded input and button.

HTML

<div class="input-group input-group-rounded">
  <input class="input-group-field" type="search">
  <div class="input-group-button">
    <input type="submit" class="button secondary" value="Search">
  </div>
</div>

.input-group-rounded {
  .input-group-field {
    border-radius: 5000px 0 0 5000px;
    padding-left: 1rem;
  }

  .input-group-button .button {
    border-radius:  0 5000px 5000px 0;
    font-size: 0.8rem;
  }
}

.input-group-rounded .input-group-field {
  border-radius: 5000px 0 0 5000px;
  padding-left: 1rem;
}

.input-group-rounded .input-group-button .button {
  border-radius: 0 5000px 5000px 0;
  font-size: 0.8rem;
}

JS