<form action="#" id="search_box">  
  <div class="wrapper">  
  <input type="text" id="search" name="search" placeholder="Search for Music" />  
  <button type="submit" class="search_btn"><img src="search_icon.png" title="Search" /></button>  
  </div>  
  </form>

#search_box {  
  background:-moz-linear-gradient(top, #ffd73a, #ffa500);  
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#ffd73a), to(#ffa500));  
  border:1px solid #d28703;  
  border-radius:5px;  
  -moz-border-radius:5px;  
  -webkit-border-radius:5px;  
  -moz-box-shadow:inset 0 1px #ffff90, inset 0 -2px 5px #ffd05d, 0 0 0 4px rgba(255,255,255,0.65);  
  -webkit-box-shadow:inset 0 1px #ffff90, inset 0 -2px 5px #ffd05d, 0 0 0 4px rgba(255,255,255,0.65);  
  padding:9px;  
  width:570px;  
  }  
  #search_box .wrapper {  
  background:#fff;  
  border:1px solid #d28703;  
  -moz-border-radius:2px;  
  -webkit-border-radius:2px;  
  -moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.3), 0 1px #ff0;  
  -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.3), 0 1px #ff0;  
  padding:13px 0 10px 8px;  
  position:relative;  
  }  
  #search_box input { border:none; color:#333; font:bold 24px Helvetica, Arial, sans-serif; width:510px; }  
  #search_box button {  
  background:-moz-linear-gradient(top, #453e26, #000);  
  border:1px solid #000;  
  -moz-border-radius:2px;  
  -webkit-border-radius:2px;  
  -moz-box-shadow:inset 0 -2px 3px #193544, inset 0 1px #907817, 0 1px 1px rgba(0,0,0,4);  
  -webkit-box-shadow:inset 0 -2px 3px #193544, inset 0 1px #907817, 0 1px 1px rgba(0,0,0,.4);  
  cursor:pointer;  
  height:45px;  
  position:absolute;  
  right:2px;  
  top:2px;  
  width:45px;  
  }