如何在没有JavaScript的情况下运行搜索框？

Question

我想删除JavaScript。但是，如果没有JavaScript，它就无法工作。有什么解决方案，请修改代码。

CSS-

.search-button a{display:block;color:#2f3542;cursor:pointer}
.search-box-overlay.search-box-overlay-show{visibility:visible;opacity:1;animation:fadeInUp .7s}
.search-box-overlay{width:100%;height:100%;position:fixed;display:table;top:0;left:0;opacity:0;visibility:hidden;z-index:9999;-webkit-transform:translateZ(0);transform:translateZ(0);background-color:rgba(241,242,246,.97);text-align:center;transition:all ease-in-out .25s}
.search-box-wrapper{display:table-cell;vertical-align:middle;text-align:center;font-size:18px;-webkit-transform:scale(1.5);transform:scale(1.5);opacity:0;visibility:hidden;transition:all ease-in-out .3s;margin:auto}
.search-box-overlay-show .search-box-wrapper{opacity:1;visibility:visible;-webkit-transform:scale(1);transform:scale(1)}
.close-button{cursor:pointer}
.close-button span:nth-of-type(1){transform:translateY(10px) rotate(-45deg);width:29px;height:4px;position:absolute;background:rgba(0,0,0,0.25);border-radius:2px;right:0;margin:50px;z-index:999999}
.close-button span:nth-of-type(2){top:25px;transform:translateY(-15px) rotate(45deg);width:29px;height:4px;position:absolute;background:rgba(0,0,0,0.25);border-radius:2px;float:right;right:0;margin:50px;z-index:999}
.close-button span:nth-of-type(3){top:-8px;width:50px;height:40px;position:absolute;border-radius:2px;float:right;right:-10px;margin:50px;z-index:9999;opacity:0}
.search-box-wrapper form{display:inline-block;box-shadow:0 4px 15px rgba(0,0,0,0.1)}
#search-btn{border:0;color:#fff;padding:17px 21px;cursor:pointer;background:#ff6348;outline:none;margin-left:-10px;transition:all .3s}
#search-btn:hover{background:#ff7f50;outline:none}
#search-box{background:#fff;border:0;padding:17px 15px;max-width:640px;color:#747d8c;outline:none}

HTML-

<div class='search-button'><a id='show-search' onclick='Showsearch()'><span itemprop='name'><i class='fa fa-search'/></span></a></div>
<div class='search-box-overlay' id='s-overlay'>
    <label class='close-button' onclick='closesearch()'>
        <span/><span/><span/>
    </label>        
    <div class='search-box-wrapper' id='searach-wrap'>      
        <form action='/search' id='searchthis' method='get'>
            <input id='search-box' name='q' placeholder='Search This Site...' size='40' type='text'/>
            <button id='search-btn'><i class='fa fa-search'/></button>
        </form>       
    </div>
</div> 

JavaScript-

<script type='text/javascript'>
   function Showsearch(){
     var soverlay = document.getElementById(&#39;s-overlay&#39;);
        soverlay.classList.add(&#39;search-box-overlay-show&#39;);
    }
    function closesearch(){
    var soverlay = document.getElementById(&#39;s-overlay&#39;);
        soverlay.classList.remove(&#39;search-box-overlay-show&#39;);
    }
</script>

Answer 1

CSS用于对内容进行样式设置，而JS是处理点击和执行某些逻辑的正确方法。通过损坏系统来解释您的意思，我会尽力帮助您修复它。

Answer 2

CSS表示casacade样式表，您想如何用它创建表单和函数？您肯定需要js。

换句话说，css用于视觉效果，javascript赋予了它功能。您只是无法使用CSS创建方法。

Answer 3

CSS仅用于其他人提到的样式（颜色，字体样式等）。通过css添加“交互性”将是这样的

.search-button a:active{background-color:#000;}

更改活动或悬停等时的样式，仅此而已。我个人不会说这是交互式的。 Javascript不应该减慢您的网站的速度，因为数千个网站广泛使用它。如果是，那么您需要查看JavaScript代码并进行调试。

问候