丸みのあるサーチフォーム

RESULT
HTML
CSS

コピー

<div class="msr_search_06">
  <form>
    <input type="text" value="">
    <button type="submit">Search</button>
  </form>
</div>

コピー

.msr_search_06 form{
  height:32px;
  width:240px;
  position:relative;
}
.msr_search_06 form input[type=text]{
  width:240px;
  height:32px;
  padding:4px 40px 4px 8px;
  border:none;
  -webkit-border-radius:32px;
     -moz-border-radius:32px;
          border-radius:32px;
  -webkit-appearance: none;
  outline: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position:absolute;
  background:#EEEEEE;
  top:0;
  right:0;
  backface-visibility: hidden;
  -webkit-transition: 0.25s ease-out;
     -moz-transition: 0.25s ease-out;
       -o-transition: 0.25s ease-out;
          transition: 0.25s ease-out;
}
.msr_search_06 form input[type=text]:focus{
  background:#F6F6F6;
}
.msr_search_06 form button{
  width:64px;
  height:32px;
  color:#fff;
  border:none;
  -webkit-border-radius:16px;
     -moz-border-radius:16px;
          border-radius:16px;
  background:#1B73BA;
  display:inline-block;
  -webkit-appearance: none;
  outline: 0;
  position:absolute;
  top:0;
  right:0;
  cursor:pointer;
  backface-visibility: hidden;
  -webkit-transition: 0.3s ease-out;
     -moz-transition: 0.3s ease-out;
       -o-transition: 0.3s ease-out;
          transition: 0.3s ease-out;
}
.msr_search_06 form button:hover{
  opacity:0.8;
}