CSS自定义控件之search控件

search自定义控件概述

在web编程方面，我们很容易碰到需要提供搜索的功能，需要提供一个input给用户输入，还有一个search按钮进行点击。今天我们就来看看这个控件的css代码。这个控件需要保证在浏览器窗口放大或者缩小时，保证input控件跟随窗口放大而放大，缩小而缩小。

这个控件中，我们可以学习到：

• 如何使用浮动，保证控件的可伸缩性，即随着浏览器窗口大小的变化而变化
• 如何在一个包含placehold的input控件内部放置图片
• 如何实现一个带有搜索按钮的搜索框

最终效果：

html代码

HTML代码：

    

            
                
            

            

                
                
            

    

注意一下，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）