CSS 搜索框如何保持响应

Question

我几乎不需要帮助就能让我的搜索框响应

HTML:

<div class="span12">
    <div id='search-box'>
        <form action='/search' id='search-form' method='get' target='_top'>
            <input class='search-text' name='q' placeholder='Search by name' type='text'/>
            <button id='search-button' type='submit'>src</button>
        </form>
    </div>
</div>

CSS:

#search-box {
    width:100%;
    height:44px;
    background:#ffd965;
    border-bottom:1px solid #fff;
    display:block;
}

#search-form {
    positoin:absolute;
    left:16px;
    right:16px;
    width:100%;
    height:30px;
    background-color:#fff;
    display:block;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

#search-text {
    width:100%;
    height:25px;
    background:  transparent;       
}

#search-box input[type="text"] {

}

#search-button {
    position: absolute;
    top: 0;
    left: 15px;
    height: 42px;
    width: 30px;
    text-align: center;
    border-width: 0;
    background-color: transparent ;
    background-image:url('../images/search.png');
    background-repeat:no-repeat;
}

我的代码是:JSFiddle

Answer 1

试试这个

.search-text {
    width:50%;
}

看到这个

http://jsfiddle.net/La9r6/2/