0

我已经用搜索按钮创建了搜索框，但我希望搜索框只有在我点击带有动画（切换或其他东西......）的搜索按钮时才可见，例如http://prntscr.com/tijo4，网站：http ://thenextweb.com/。

我只试过这个：http: //jsfiddle.net/JHdzd

HTML：

    <div id="search">
        <input title="Search for..." id="forsearch" type="text" class="forsearch_products">
        <input class="search-button" type="submit" value="Search">
    </div>

CSS：

#search {
    width: 250px;
    height: 28px;
    background-color: #C7D7E8;
    padding: 6px 0 6px 0px;
}

input#forsearch.forsearch_products {
    width: 135px;
    height: 18px;
    border: 2px solid #6B9DD3;
    margin: 0 3px 0 8px;
    float: left;
    padding: 3px;
}

input.search-button {
    width: 85px;
    height: 28px;
    border: 1px solid white;
    font-size: 12px;
    display: block;
    float: left;
    font-weight: bold;
    color: white;
    background: rgb(237,173,113); 
}
4

2 回答 2

1

使用 jQuery，这非常简单。单击搜索按钮后，使用此代码将在您的搜索框（我已将其调整为最初隐藏）中淡出：

$("#search").click(function(){
    $("#forsearch").fadeIn(1000);
})

查看此小提琴以查看它的实际效果。我还调整了您的搜索框的位置，使其固定在右侧（如果您删除了我的样式更改，但最初将搜索框保持为隐藏状态，您可以了解原因）。您还可以查看此页面以了解有关 jQuery 效果的更多信息。

于 2013-02-20T22:05:26.277 回答
0 
input[type="search"] {
     background: url("http://www.dreamtemplate.com/dreamcodes/web_icons/gray-classic-search-icon.png") no-repeat scroll 5px 50% #ffffff;
     border-radius: 4px;
     border: 1px solid #f1f1f1;
     color: transparent;
     cursor: pointer;
     font-family: Verdana,Geneva,sans-serif;
     font-size: 14px;
     padding: 12px 5px 12px 22px;
     transition: all 0.3s ease 0s;
     width: 22px;
}

查看演示http://cssdesk.com/Gsedv

于 2014-06-26T10:04:06.033 回答