<h1>search box</h1>

<form>
  <input type="text"><button type="button">
    <i class="fa fa-search" aria-hidden="true"></i>
  </button>
</form>

<p>
  Coded by 
  <a href="http://www.alexanderlomholt.com" target="_blank">
    Alexander Lomholt
  </a>
</p>

@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400');

/*  CSS reset start */
input, button {
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
  border-radius: 0;
  vertical-align: top;
} /* CSS reset end */

body {
  margin-top: 13%;
  background: rgb(178, 26, 57);
}

h1 {
  color: rgb(255,255,255);
  text-align: center;
  font-size: 4rem;
  font-family: 'Lato', sans-serif;
  font-weight: 200;
  margin-bottom: 3%;
}

form {
  text-align: center;
}

button {
  text-align: center;
  border: none;
  height: 70px;
  width: 70px;
  background: white;
  border-radius: 0 35px 35px 0;
  color: rgb(170, 170, 170);
  font-size: 1.4rem;
}

input[type="text"] {
  border: none;
  height: 70px;
  width: 400px;
  outline: none;
  margin-bottom: 20%;
  padding-left: 40px;
  border-radius: 35px 0 0 35px;
  color: rgb(110,110,110);
  font-size: 1.6rem;
  font-family: 'Lato', sans-serif;
  font-weight: 200;
  text-align: center;
}

p, a {
  color: white;
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  text-decoration: none;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.