• 一个漂亮的文本框格式


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

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

    效果截图:

  • 相关阅读:
    kali长时间未使用导致数字签名过期无法更新源解决办法
    4.爬虫去重策略
    3.编码问题
    kalinux 五笔安装
    ★★★kalinux 常用命令
    安装vm tools时出现如下问题 The path "/usr/bin/gcc" is not valid path to the
    kalinux实现自适用全屏、与物理主机共享文件方法
    wifi pj WiFiPhisher 安装使用
    条款20:在传递对象的时候尽量用reference-to-constent来代替,pass-by-value
    条款19:定义class就相当于定义一个个的内置类型
  • 原文地址:https://www.cnblogs.com/daisyleamo/p/3197449.html
Copyright © 2020-2023  润新知