search自定義控件概述

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

這個控件中，我們可以學習到：

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

最終效果：

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控件的寬度設置為100%，這樣其大小便會依據窗口的大小動態的伸縮其空間了。
2. 在input_wrap內部，為了放置input_icon，首先通過調整inputField的padding，使得placeholder右移；然后使用相對定位的方式，放置input_icon。

下面一步步來看CSS代碼：

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

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

    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. 設置輸入框的長度，為浮動到右邊的btn按鈕讓出空間

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

4. 做一些空間調整和修飾。其中需要注意的是：調整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. 使用定位，在輸入框內部放置搜索圖標。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;
    }
   

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