一个漂亮的文本框格式

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

@CHARSET "UTF-8";
/* @group search */
.frm-search{
   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>

效果截图:

原文地址:https://www.cnblogs.com/daisyleamo/p/3197449.html