search自定義控件概述

在web編程方面篙梢，我們很容易碰到需要提供搜索的功能执庐，需要提供一個input給用戶輸入，還有一個search按鈕進行點擊命迈。今天我們就來看看這個控件的css代碼皮钠。這個控件需要保證在瀏覽器窗口放大或者縮小時稳捆，保證input控件跟隨窗口放大而放大，縮小而縮小麦轰。

這個控件中乔夯，我們可以學(xué)習(xí)到：

• 如何使用浮動，保證控件的可伸縮性款侵，即隨著瀏覽器窗口大小的變化而變化
• 如何在一個包含placehold的input控件內(nèi)部放置圖片
• 如何實現(xiàn)一個帶有搜索按鈕的搜索框

最終效果：

html代碼

HTML代碼：
<div class="widget_search">
    <div class="inner">
            <span class="btn">
                <input type="submit" value="Search" />
            </span>

            <div class="input_wrap">
                <span class="input_icon"></span>
                <input class="inputField" name="search3" type="text"  placeholder="Type word here" />
            </div>

    </div>
</div>

注意一下末荐，html中，搜索框的上部是按鈕喳坠，下部是輸入框鞠评，此種安排是有目的茂蚓。

css代碼分析

CSS代碼的策略是：

1. 將btn向右浮動壕鹉，并且將input_wrap的margin-right空出足夠的空間留給浮動到右邊的btn，并將自身的input控件的寬度設(shè)置為100%聋涨，這樣其大小便會依據(jù)窗口的大小動態(tài)的伸縮其空間了晾浴。
2. 在input_wrap內(nèi)部，為了放置input_icon牍白，首先通過調(diào)整inputField的padding脊凰，使得placeholder右移；然后使用相對定位的方式茂腥，放置input_icon狸涌。

下面一步步來看CSS代碼：

1. 看一下input控件本身的代碼

   此處的代碼主要處理用戶的輸入，有兩點需要注意：width:100%保證此處的input控件會擴展至父控件的寬度最岗，其效果是隨著瀏覽器窗口的大小變化而變化帕胆；box-sizing屬性的設(shè)置，保證了為input元素的寬度會包含內(nèi)邊距般渡、邊框懒豹、外邊距，從而不會讓其因設(shè)置內(nèi)邊距驯用、邊框脸秽、外邊距影響后面的布局。

    input[type="text"] {
        background: #dfdfdf;
   
        padding: 0 16px;
        font-size: 17px;
   
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
   
        width:100%;
    }
   
    input[type="submit"] {
        height:100%;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        padding: 0 8px;
        font-size: 17px;
    }
   

2. 向右浮動btn按鈕

    .widget_search .btn{
        float:right;
        height:33px;
    }
   

3. 設(shè)置輸入框的長度蝴乔，為浮動到右邊的btn按鈕讓出空間

    .widget_search .input_wrap{
        margin-right: 90px; 
        position: relative;
    }
   

4. 做一些空間調(diào)整和修飾记餐。其中需要注意的是：調(diào)整input_wrap的input控件的padding-left，為input_icon保留合適的空間薇正。

    .widget_search .inner{
        padding: 15px 16px 9px;
    }
   
    .widget_search .input_wrap input{height:33px; padding-left: 30px;}
    .widget_search input::-webkit-input-placeholder {color:#a4a4a4;}
    .widget_search input:-moz-placeholder {color:#a4a4a4;}
   

5. 使用定位片酝，在輸入框內(nèi)部放置搜索圖標巩剖。search.png是一個16x16的小圖像。

    .widget_search .input_icon{
        background: url(images/search.png);
        width: 16px;
        height: 16px;
        left: 10px;
        top: 9px;
        right: auto;
        display:block;
        position: absolute;
    }
   

我的個人博客還有更多的內(nèi)容（http://blog.zxfamily.site）