zoukankan      html  css  js  c++  java
  • 一个漂亮的文本框格式

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

    @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>

    效果截图:

  • 相关阅读:
    HDU3336 Count the string —— KMP next数组
    CodeForces
    51Nod 1627 瞬间移动 —— 组合数学
    51Nod 1158 全是1的最大子矩阵 —— 预处理 + 暴力枚举 or 单调栈
    51Nod 1225 余数之和 —— 分区枚举
    51Nod 1084 矩阵取数问题 V2 —— 最小费用最大流 or 多线程DP
    51Nod 机器人走方格 V3 —— 卡特兰数、Lucas定理
    51Nod XOR key —— 区间最大异或值 可持久化字典树
    HDU4825 Xor Sum —— Trie树
    51Nod 1515 明辨是非 —— 并查集 + 启发式合并
  • 原文地址:https://www.cnblogs.com/daisyleamo/p/3197449.html
Copyright © 2011-2022 走看看