当前位置:首页 > 开发代码

CSS3点击搜索按钮实现响应式伸缩框

小强的家   发布时间:2019-04-22   

CSS3点击按钮实现响应式伸缩搜索框。

文件引用:

<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>

页面结构:

 <div class="main clearfix">
                <!-- Optional columns for small components -->
                <div class="column">
                    <p>The search bar can be opened on click, it has a fluid 
                    width and it&#39;s mobile-friendly.</p>
                </div>
                <div class="column">
                    <div id="sb-search" class="sb-search">
                        <form>
              <input class="sb-search-input" placeholder="Enter your search term..." type="text" value="" name="search" id="search">
                            <input class="sb-search-submit" type="submit" value="">
                            <span class="sb-icon-search"></span>
                        </form>
                    </div>
                </div>
            </div>

调用代码:

   <script src="js/classie.js"></script>
<script src="js/uisearch.js"></script>
<script>
  new UISearch( document.getElementById( 'sb-search' ) );
</script>
 



相关文章:

CSS3点击搜索按钮实现响应式伸缩框评论(共有 0 条评论)

我要点评CSS3点击搜索按钮实现响应式伸缩框
用户名: 密码: (游客无需填写密码)

验证码: 看不清楚,点击刷新 (如果提示验证码过期,请点击验证码刷新。)
【提交后需要审核】