做项目时感觉自己的页面做的特别丑,然后就开始搜罗漂亮的页面,不过收集起来还真不容易,截下来一个感觉不错的文本框样式:
@CHARSET "UTF-8"; /* @group search */ .frm-search{ width: 149px; height: 34px; border: none; font-weight: bold; box-shadow: inner 1px 0 3px #5d9ebf; -moz-box-shadow: inner 1px 0 3px #5d9ebf; -webkit-box-shadow: inner 1px 0 3px #5d9ebf; background: #75bbe0; /* Old browsers */ background: -moz-linear-gradient(top, #75bbe0 0%, #c2e3f4 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#75bbe0), color-stop(100%,#c2e3f4)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #75bbe0 0%,#c2e3f4 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #75bbe0 0%,#c2e3f4 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #75bbe0 0%,#c2e3f4 100%); /* IE10+ */ background: linear-gradient(top, #75bbe0 0%,#c2e3f4 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#75bbe0', endColorstr='#c2e3f4',GradientType=0 ); /* IE6-9 */ color: #fffeff; text-shadow: 0 1px 1px #66aacd; -moz-text-shadow: 0 1px 1px #66aacd; -webkit-text-shadow: 0 1px 1px #66aacd; padding: 0 38px 0 8px; } /* individual: webkit */ .frm-search::-webkit-input-placeholder { color:#fff; font-weight: bold; } /* individual: mozilla */ .frm-search::-moz-placeholder { color:#fff; font-weight: bold; } .frm-search:focus{ background: #3ba7dd; /* Old browsers */ background: -moz-linear-gradient(top, #3ba7dd 0%, #98d4f2 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3ba7dd), color-stop(100%,#98d4f2)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #3ba7dd 0%,#98d4f2 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #3ba7dd 0%,#98d4f2 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #3ba7dd 0%,#98d4f2 100%); /* IE10+ */ background: linear-gradient(top, #3ba7dd 0%,#98d4f2 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3ba7dd', endColorstr='#98d4f2',GradientType=0 ); /* IE6-9 */ } /* @end */
页面:
<div style="float: left;" class="input-append">
<input class="frm-search" type="text" name="sampleName" id="search_sample" placeholder="请输入样本名称"/>
<button class="btn btn-info" type="button" οnclick="searchSample()"><i class="icon-search icon-white"> </i>检索</button>
</div>
效果截图: