我的磨搜索代码美化版(一)

2014-05-01 06:37:21 -0400

此代码仅供参考

代码说明

以“HTML代码(一)”为蓝本,对搜索按钮做了一些小调整。

html代码(一)

<style type="text/css">
.top-search form select{padding-left:15px!important}
.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}
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::-webkit-search-decoration,input::-webkit-search-cancel-button{display: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;border-left-width:60px}
.top-search input[type="submit"]{position:absolute;right:0;z-index:1;top:1px;width:50px;height:30px;border:0;background:url(../img/csg-53707ca13d837.png) no-repeat;-webkit-background-size:115px 446px;background-size:115px 446px;background-position:14px -154px;-webkit-user-modify:read-only;border-left:1px solid #c9c9c9;border-radius:0}
</style>
<div class="top-search">
            <form role="search" method="post" action="/search">
            <p>
                <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="" />
            </p>
            </form>
        </div>

html代码(二)

<style type="text/css">
.top-search form select{padding-left:10px!important}
.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}
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}
input::-webkit-search-decoration,input::-webkit-search-cancel-button{display: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;border-left-width:60px}
.top-search input[type="submit"]{position:absolute;right:0;z-index:1;top:1px;width:50px;height:30px;border:0;background:url(../img/csg-53707ca13d837.png) no-repeat;-webkit-background-size:115px 446px;background-size:115px 446px;background-position:14px -154px;-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>

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}
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}
input::-webkit-search-decoration,input::-webkit-search-cancel-button{display: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:55px}
.top-search input[type="submit"]{position:absolute;right:0;z-index:1;top:1px;width:50px;height:30px;border:0;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAWlBMVEUAAAB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIAAZwtBAAAAHnRSTlMAB0B0nK2kkmos8P/fDtFW6V/5JgNHvTTJHLaITX6t8yc+AAABJklEQVQ4y92USZaAIAxEFRWEQkScp/tfs/XpQiD0vpsd8RtSlUCW/dOVs6KsuKjl75gsFd6liyaJNeUFGFG3bcEtYLtUOg0n+nczjBPAc4qbFZb+G+gUJoJcLaogLK9QxA0Ltuh3qVCHsQ6aUNlCrUFCjZYqfMPuBw4Y0okZyi+Io6A9Mxi9vUaiZ7t/dgOX6ELnO9RDJ0CGxTMsoeVW431ZYRPggcmbQoecBmtwb7+A0WAV+LZD0AOvAt8kVEO7E6qcwqY+CTXCMZegqhQwQ9wr28eS3RxP7gbr5xx2oKTq2eDOj5v9dN/amiLFdUXP5/x85A72qGkyY8uVw5ptMw5w5XpXSZMZK+3zUJhzffUkyGtA2DHOzUd5kow8Ss1BRJr+Dz3HP/wxDhRZHS3WAAAAAElFTkSuQmCC) no-repeat;-webkit-background-size:22px 22px;background-size:22px 22px;background-position:13px 5px;-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>

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}
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:55px}
.top-search input[type="submit"]{position:absolute;right:0;z-index:1;top:1px;width:50px;height:30px;border:0;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAWlBMVEUAAAB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIAAZwtBAAAAHnRSTlMAB0B0nK2kkmos8P/fDtFW6V/5JgNHvTTJHLaITX6t8yc+AAABJklEQVQ4y92USZaAIAxEFRWEQkScp/tfs/XpQiD0vpsd8RtSlUCW/dOVs6KsuKjl75gsFd6liyaJNeUFGFG3bcEtYLtUOg0n+nczjBPAc4qbFZb+G+gUJoJcLaogLK9QxA0Ltuh3qVCHsQ6aUNlCrUFCjZYqfMPuBw4Y0okZyi+Io6A9Mxi9vUaiZ7t/dgOX6ELnO9RDJ0CGxTMsoeVW431ZYRPggcmbQoecBmtwb7+A0WAV+LZD0AOvAt8kVEO7E6qcwqY+CTXCMZegqhQwQ9wr28eS3RxP7gbr5xx2oKTq2eDOj5v9dN/amiLFdUXP5/x85A72qGkyY8uVw5ptMw5w5XpXSZMZK+3zUJhzffUkyGtA2DHOzUd5kow8Ss1BRJr+Dz3HP/wxDhRZHS3WAAAAAElFTkSuQmCC) no-repeat;-webkit-background-size:22px 22px;background-size:22px 22px;background-position:13px 5px;-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>

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}
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:55px}
.top-search input[type="submit"]{position:absolute;right:0;z-index:1;top:1px;width:50px;height:30px;border:0;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAWlBMVEUAAAB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIB6fIAAZwtBAAAAHnRSTlMAB0B0nK2kkmos8P/fDtFW6V/5JgNHvTTJHLaITX6t8yc+AAABJklEQVQ4y92USZaAIAxEFRWEQkScp/tfs/XpQiD0vpsd8RtSlUCW/dOVs6KsuKjl75gsFd6liyaJNeUFGFG3bcEtYLtUOg0n+nczjBPAc4qbFZb+G+gUJoJcLaogLK9QxA0Ltuh3qVCHsQ6aUNlCrUFCjZYqfMPuBw4Y0okZyi+Io6A9Mxi9vUaiZ7t/dgOX6ELnO9RDJ0CGxTMsoeVW431ZYRPggcmbQoecBmtwb7+A0WAV+LZD0AOvAt8kVEO7E6qcwqY+CTXCMZegqhQwQ9wr28eS3RxP7gbr5xx2oKTq2eDOj5v9dN/amiLFdUXP5/x85A72qGkyY8uVw5ptMw5w5XpXSZMZK+3zUJhzffUkyGtA2DHOzUd5kow8Ss1BRJr+Dz3HP/wxDhRZHS3WAAAAAElFTkSuQmCC) no-repeat;-webkit-background-size:22px 22px;background-size:22px 22px;background-position:13px 5px;-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="" maxlength="20" autocomplete="off" />
                <input type="submit" value="" title="搜索" />
       
            </form>
        </div>

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>

代码演示

csg-53707ca13d837.png (13.17 KiB) | Meta

【本站仅供参考，版权归原作者所有】

«Newer Older»

Back to home

Subscribe | Register | Login | N