Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Foundation 5 - input field with inline search icon on the right.
// fonts from IcoMoon.io
// ..
// ..
// ..
.icon-search:before {
content: "\e600";
}
<section id="footer-search">
<h2>Search YOUR_WEB_SITE</h2>
<form>
<input class="search-bar" placeholder="Enter search terms" type="text">
<div class="button-wrap">
<button name="button" type="submit">
<i class="icon-search"></i>
</button>
</div>
</form>
</section>
section#footer-search {
h2 {
color: white;
font-size: 12px;
}
@include grid-row();
@include grid-column($columns: 12, $collapse: true);
form {
input[type="text"] {
@include grid-column($columns: 10, $collapse: true);
@include side-radius($side: right, $radius: 0);
@include side-radius($side: left, $radius: 4px);
padding-left: rem-calc(10px);
border: none;
}
.button-wrap {
@include grid-column($columns: 1, $collapse: true);
button {
@include prefix-postfix-base();
@include postfix();
@include side-radius($side: right, $radius: 4px);
// Reduce default button size (via padding)
padding-left: rem-calc(15px);
border: none;
background: white;
i {color: gray;}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.