<p>
  If you plan to borrow these, please only grab one. The roles are duplicated, and you don't want to do that.
</p>


<form method="get" id="searchform1" class="searchform" action="http://adrianroselli.com/">
  <div role="search">
    <label for="s1">Search for:</label>
    <input type="text" value="" name="s1" id="s1" placeholder="Search">
    <button aria-label="Do search">
      <svg viewBox="0 0 1024 1024" preserveAspectRatio="xMidYMid meet">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-search-line"></use>
      </svg>
    </button>
  </div>
</form>

<form method="get" id="searchform2" class="searchform" action="http://adrianroselli.com/">
  <div role="search">
    <label for="s2">Search for:</label>
    <input type="text" value="" name="s2" id="s2" placeholder="Search">
    <button aria-label="Do search">
      <svg viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-search"></use>
      </svg>
    </button>
  </div>
</form>



<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="SVGsprites">
  <defs>
    <g id="icon-search" aria-labeledby="title-search" aria-describedby="desc-search" role="image"><!-- viewbox: 0 0 512 512 -->
      <title id="title-search">Search icon</title>
      <desc id="desc-search">Used in the search form as a button.</desc>
      <path d="M496.1 435.7l-121.3-103.1c-12.5-11.3-25.9-16.5-36.8-16 28.6-33.5 45.9-77 45.9-124.6 0-106-86-192-192-192s-192 86-192 192 86 192 192 192c47.5 0 91.1-17.3 124.6-45.9-0.5 10.8 4.7 24.2 16 36.8l103.1 121.3c17.7 19.6 46.5 21.3 64.1 3.7s15.9-46.4-3.7-64.1zM192 320c-70.7 0-128-57.3-128-128s57.3-128 128-128 128 57.3 128 128-57.3 128-128 128z"/>
    </g>
    <g id="icon-search-line" aria-labeledby="title-search-line" aria-describedby="desc-search-line" role="image"><!-- viewbox: 0 0 1024 1024 -->
      <title id="title-search-line">Search icon</title>
      <desc id="desc-search-line">Used in the search form as a button.</desc>
      <path d="M640 0.2c-212.1 0-384 171.9-384 384 0 64.8 16.2 125.9 44.6 179.5l-267 266.9 0.2 0.2c-20.9 20.5-33.9 48.9-33.9 80.5 0 62.4 50.6 112.9 112.9 112.9 31.5 0 60-13 80.5-33.9l-0.1-0.1 266.9-266.9c53.6 28.5 114.8 44.8 179.7 44.8 212.1 0 384-171.9 384-384s-171.9-384-384-384zM153.4 950.3c-10.3 10.7-24.6 17.4-40.5 17.4-31.2 0-56.5-25.2-56.5-56.4 0-15.9 6.7-30.2 17.4-40.5l-0.3-0.3 258.1-258.1c22.6 30.4 49.4 57.3 79.8 79.9l-258 258zM640 704.2c-176.7 0-320-143.3-320-320 0-176.7 143.3-320 320-320 176.7 0 320 143.3 320 320 0 176.7-143.3 320-320 320zM640 160.2c8.8 0 16 7.2 16 16s-7.2 16-16 16c-106 0-192 86-192 192 0 8.8-7.2 16-16 16s-16-7.2-16-16c0-123.7 100.3-224 224-224z"/>
    </g>
  </defs>
</svg>
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);

body {
  background-color: #6D695C;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAACVBMVEUAAAAAAAAAAACDY+nAAAAAA3RSTlMmDQBzGIDBAAAAG0lEQVR42uXIIQEAAADCMHj/0NdkQMws0HEeAqvwAUGJthrXAAAAAElFTkSuQmCC);
  font-size: 100%;
  color: #fff;
  font-family: Lato, Arial, sans-serif;
  padding: 1em;
  margin: 0;
  line-height: 1.6;
}

form {
  margin: 1em auto;
  padding: 0 1em;
}

svg {
  display: none;
}

[role="search"] {
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid rgba(0,0,0,.5);
  border-radius: .5em;
  padding: 0;
  max-width: 36em;
}

[role="search"] label {
  display: inline-block;
  width: 0;
  overflow: hidden;
  text-indent: -1000px;
  margin: 0;
}

input::-webkit-input-placeholder {
  color: #757575;
}

input:-ms-input-placeholder {
  color: #757575;
}

input::-moz-placeholder {
  color: #757575;
}

input[type="text"] {
  border-radius: .5em;
  border: 0.1em solid #666;
  padding: .5em .75em;
  font-family: Lato, Arial, sans-serif;
  font-size: 100%;
}

[role="search"] input[type="text"] {
  border: none;
  background-color: transparent;
  margin: 0;
  width: 65%;
  width: calc(100% - 4em);
  float: left;
}

[role="search"] button {
  display: block;
  width: 2em;
  height: 2em;
  margin: .25em;
  padding: 1em;
  border: none;
  padding: 0;
  float: right;
  background: transparent;
  cursor: pointer;
}

[role="search"] button svg {
  display: block;
  margin: 0 auto;
  fill: #666;
  width: 100%;
  height: auto;
}

[role="search"] button:hover, [role="search"] button:focus {
  outline: none;
}

[role="search"] button:hover svg, [role="search"] button:focus svg {
  fill: #ac7300;
}

[role="search"] input[type="text"]:focus {
  outline: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.