Question

我正在尝试创建一个可扩展的搜索栏;喜欢 www.apple.com 使用。 （或者我以前猜过）

我一直在尝试使用此代码;

http://www.cibgraphics.com/blog/article/create_an_expandable_search_form

我目前通过插入我的测试网站的教程获得了所有代码 - 而且它没有出现。任何人都可以帮我找出原因吗？试验场地位于; www.o s m p r o d u t t i o n.com

，一旦我实现了这个;我想弄清楚如何添加类似于apple在expandable中的漂亮转换，而不是上面链接中的代码那么笨重的转换。所以我猜这个子问题会是;如何实现更平滑的过渡到搜索栏的动画变大？

我几乎正在使用该链接代码中的内容;但它也在下面。

加价：

<section>
    <form class="search_form">
        <input type="search" class="searchinput" placeholder="Search"/>
        <input type="submit" value="Search" class="searchsubmit"/>
    </form>
    <div class="clear"></div>
</section>

的 CSS： 的

<!--Styles for Search Bah-->

.clear {
    clear: both;
}  

.search_form {
    background: #fff;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
    border: 1px solid #d6d6d6;
    padding: 3px;
    padding-left: 8px;
    -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,.3);
    -moz-box-shadow: inset 0 2px 2px rgba(0,0,0,.3);
    -o-box-shadow: inset 0 2px 2px rgba(0,0,0,.3);
    -ms-box-shadow: inset 0 2px 2px rgba(0,0,0,.3);
    box-shadow: inset 0 2px 2px rgba(0,0,0,.3);
    float: left;
}  


.searchsubmit {
    display: block;
    height: 23px;
    width: 23px;
    line-height: 29px;
    background: url('../images/searchicon.png') no-repeat 3px 4px;
    text-indent: -9999px;
    border: none;
    vertical-align: middle;
    float: right;
}  

.searchinput {
    width: 200px;
    font-size: 13px;
    color: #999;
    background: #fff;
    vertical-align: middle;
    margin-top: 4px;
    border: none;
    float: left;
    outline: none;
}  

.searchinput:focus {
    width: 400px;
}  

.searchinput {
    width: 200px;
    font-size: 13px;
    color: #999;
    background: #fff;
    vertical-align: middle;
    margin-top: 4px;
    border: none;
    float: left;
    outline: none;
    -moz-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
}  

::-webkit-search-decoration
{
    display: none;
}

input[type=search]{
    -webkit-appearance:textfield;
    -webkit-box-sizing:content-box;
}

和我猜最后;如何将正在使用的“搜索表单”的功能与我目前正在使用的新表单相关联？会快速的;以某种方式将'标准WP搜索框'与我创建的新搜索框绑在一起？要么将它自定义为新的，要么用它的功能定义我的新功能并隐藏前一个？

更新：我的搜索栏基本上位于屏幕右上方的测试网站中;但是现在我正在调用的“搜索按钮”没有出现在它应该的右侧。而且我一直在想弄清楚如何将标准WP工作搜索表单的功能与它结合起来。

以下是主题附带的标准WP功能搜索栏的PHP标记;我想我只需要通过我的新“搜索栏”迁移/集成样式和脚本，但现在 - 如何？

<ul>
<!-- <div align="center"> -->
<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
        <!-- <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" size="20" /> -->
        <input type="text" value="<?php _e('Search','emerald_stretch'); ?>" name="s" id="s" size="20" onfocus="if (this.value == '<?php _e('Search','emerald_stretch'); ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php _e('Search','emerald_stretch'); ?>';}" />
        <input type="submit" id="searchsubmit" value="<?php _e('Find','emerald_stretch'); ?>" />
</form>
<!-- </div> -->
</ul>

我只是尝试通过添加类来添加我创建的新样式和外观;而现在它似乎代替旧的WP - 但焦点消失了吗？

<ul>
<!-- <div align="center"> -->
<form method="get" class="search_form" action="<?php bloginfo('home'); ?>/">
        <!-- <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" size="20" /> -->
        <input type="text" class="searchinput" value="<?php _e('Search','emerald_stretch'); ?>" name="s" id="s" size="20" onfocus="if (this.value == '<?php _e('Search','emerald_stretch'); ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php _e('Search','emerald_stretch'); ?>';}" />
        <input type="submit" class="searchsubmit" id="searchsubmit" value="<?php _e('Find','emerald_stretch'); ?>" />
</form>
<!-- </div> -->
</ul>

Answer 1

根据它的外观，您的搜索框工作正常。查看您网站的最左下角。如果您试图获取网站右上角的绿色搜索框以反映此类动画，则需要正确引用您指定的CSS。

可扩展的搜索栏;实施和动画

1 个答案: