Skip to content

Instantly share code, notes, and snippets.

@TrueSlu

TrueSlu/icon-in-search-input.markdown

Created August 27, 2018 22:48
Show Gist options
  • Save TrueSlu/1aaa6e1187d1960162ca5551d04c790e to your computer and use it in GitHub Desktop.
Save TrueSlu/1aaa6e1187d1960162ca5551d04c790e to your computer and use it in GitHub Desktop.
Download ZIP
Icon in search input
Raw
icon-in-search-input.markdown
Raw
index.pug
.container
.field-input
input(type='text', placeholder='Search...')
span
Raw
style.scss
body {
margin: 0;
padding: 0;
}
.container {
max-width: 960px;
margin: 0 auto;
width: 100%;
padding: 5rem 2rem;
.field-input {
text-align: center;
input {
text-align: left;
border-radius: 6rem;
border: 1px solid rgb(160, 160, 160);
padding: .6rem 2rem .6rem 1rem;
width: 12rem;
font-family: 'roboto';
transition: .5s;
&:focus {
outline: none;
border-color: #212121;
transition: .5s;
}
}
span:before {
content: '';
cursor: pointer;
position: relative;
font-family: 'fontawesome';
top: 0;
right: 1.5rem;
}
}
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment