简洁好看的我的蘑搜索美化代码

代码演示

HTML代码

<style type="text/css">
.top-search form select{padding-left:15px}
.top-search{padding:0 10px;overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0)}
.top-search form{position:relative}
.top-search form p{font-size:15px;text-align:center}
.top-search form select{display:block;position:absolute;padding-left:10px;top:0;left:0;width:60px;height:32px;border:1px solid #c9c9c9;border-top-left-radius:20px;border-bottom-left-radius:20px;-webkit-user-modify:read-only;background:#fff;font: 12px Georgia, serif;}
select{-webkit-appearance:none;-webkit-border-radius:0;border-radius:0;-webkit-border-image:none;-webkit-box-shadow:none;box-shadow:none}
.top-search .divarrow{display:block;border:5px solid #868686;position:absolute;border-color:#868686 transparent transparent;top:14px;left:44px}
input,button,select,textarea{outline:none}
.top-search input[type="search"]{display:block;width:100%;height:32px;line-height:20px;overflow:hidden;border:1px solid #c9c9c9;border-radius:20px;text-indent:5px;padding-left:60px;padding-right:60px}
.top-search input[type="submit"]{position:absolute;right:0;z-index:1;top:1px;width:50px;height:30px;border:none;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAABy0lEQVR42t2VzytEURTHh/yIhaIoYSNLC2Kj0JA1oiGF5TPo1TyZd3++e2Yv2cvGgr9AtspGs6BsKKwUGT/ym2zk+7ISM/MGG17d3r3d8z7n3HO+591Q6F89RFSAURTBwDL/x8A4NxGuaE+oxIVQdIdxIzSdCGkWIxGnJGdgTMpqAJMA7TPmjUtJjY5SNTHO6znX3VzSstCJK869qcBQx3EqhDJnTHhzmKeNimvdAwf3jJnprFDbtou5NIdMmQUs87IGwakBp3pSilozGjKm2v08WhaVBj0hgphH5OsZjaSiNYBncixJHlJ34+f/y91wmAqkTjx/p9oIZscVeuDLzUnOywF+/I4sAd5gwkykLRwMXoIU7TM4keTKjKQvhKCkK6g3Z7CmFPe85vSdBq9ojFO0b+C2ZdIbQrRHWXRMZUjHKwrRHwRqWVYhpJaC5PqyGqNNWwC/RRSDmeyi0dkq2O3iv7HpOwh0PNfVA9DmuZC0GJfU9PFUohIKmITjY4BXof0HJmk0cEFmlKrDByt+zuHkEu9twA4Ae8B8C3tD791KnZDptavMWM46tW231pWyKxaXTf6/+ZMqhNfx7tAM//plAHgb8r3096+1Ny4D0SIgvJEAAAAAAElFTkSuQmCC) no-repeat 13px 5px scroll;-webkit-user-modify:read-only;border-left:1px solid #c9c9c9;border-radius:0}
</style>
<div class="top-search">
<form role="search" action="/search">

<select name="all">
<option value="0">本站</option>
<option value="1">全站</option>
</select>
<span class="divarrow"></span>
<input type="search" name="q" placeholder="输入你要搜索的关键字" value="" autocomplete="off"
autocorrect="off" />
<input type="submit" value="" />

</form>
</div>