图片.png

    1. /*价格搜索input框*/
    2. input, button {
    3.             border: none;
    4.             outline: none;
    5.         }
    6. .tl-price-input{
    7.     width: 100%;
    8.     border: 1px solid #ccc;
    9.     padding: 7px 0;
    10.     background: #F4F4F7;
    11.     border-radius: 3px;
    12.     padding-left:5px;
    13.     -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    14.     box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    15.     -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    16.     -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    17.     transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
    18. }
    19. .tl-price-input:focus{
    20.     border-color: #66afe9;
    21.     outline: 0;
    22.     -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    23.     box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
    24. }
    26. .ant-btn {
    27.     line-height: 1.499;
    28.     position: relative;
    29.     display: inline-block;
    30.     font-weight: 400;
    31.     white-space: nowrap;
    32.     text-align: center;
    33.     background-image: none;
    34.     border: 1px solid transparent;
    35.     -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.015);
    36.     box-shadow: 0 2px 0 rgba(0,0,0,0.015);
    37.     cursor: pointer;
    38.     -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
    39.     transition: all .3s cubic-bezier(.645, .045, .355, 1);
    40.     -webkit-user-select: none;
    41.     -moz-user-select: none;
    42.     -ms-user-select: none;
    43.     user-select: none;
    44.     -ms-touch-action: manipulation;
    45.     touch-action: manipulation;
    46.     height: 32px;
    47.     padding: 0 15px;
    48.     font-size: 14px;
    49.     border-radius: 4px;
    50.     color: rgba(0,0,0,0.65);
    51.     background-color: #fff;
    52.     border-color: #d9d9d9;
    53. }
    54. //蓝色按钮
    55. .ant-btn-primary {
    56.     color: #fff;
    57.     background-color: #1890ff;
    58.     border-color: #1890ff;
    59.     text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
    60.     -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.045);
    61.     box-shadow: 0 2px 0 rgba(0,0,0,0.045);
    62. }
    63. //红色按钮，如上图
    64. .ant-btn-red {
    65.     color: #fff;
    66.     background-color: #FF5A44;
    67.     border-color: #FF5A44;
    68.     text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
    69.     -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.045);
    70.     box-shadow: 0 2px 0 rgba(0,0,0,0.045);
    71. }
    1. <div>
    2.     <div style="width: 90px;float: left"><input class="tl-price-input" type="text" placeholder="最低价"></div>
    3.     <div style="width: 20px;float: left;text-align: center">-</div>
    4.     <div style="width: 90px;float: left"><input class="tl-price-input" type="text" placeholder="最高价"></div>
    5.     <div style="width: 60px;float: left;margin-left: 20px"><button class="ant-btn ant-btn-red">确定</button></div>
    6. </div>