您的位置:首页 > 其它

一个漂亮的文本框格式

2013-07-18 09:30 393 查看
做项目时感觉自己的页面做的特别丑,然后就开始搜罗漂亮的页面,不过收集起来还真不容易,截下来一个感觉不错的文本框样式:

@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" onclick="searchSample()"><i class="icon-search icon-white">    </i>检索</button>
</div>


效果截图:
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: