搜索功能在IE中不起作用

Question

I have code below for a search function I am trying to modify. For some reason, the search icon and animation works properly in chrome and safari (only two I've tried besides IE) but not in Internet Explorer. I can't see what the issue is with my code. Does anyone know where I'm going wrong? Anything help, thanks.

 <script> //Search $('#search').click(function() { $('.search-form').animate({right: 0}, 50); $('.search-popup').show(); $('.search-bg').click(function() { $('.search-popup').hide(); $('.search-form').animate({right: '-100%'}, 50); }); }); </script> 

 <style> /*Body*/ body { font-family: "VSCO Gothic Book", Helvetica, sans-serif; background-color: #fefefe; padding-bottom: 3rem;} /*Navigation Bar*/ .nav-bar ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #fff;} .nav-bar ul li { float: right;} .nav-bar ul li a { display: block; color: #000; text-align: center; padding: 12px 16px; text-decoration: none; font-size:14px; font-family: "VSCO Gothic Book", Helvetica, sans-serif; font-weight: 300;} .nav-bar ul li a:hover { cursor:pointer; color:rgba(0,0,0,0.65);} .vsco-logo { width:35px; height:35px;} /*Flex Container*/ .flex-container { display: flex; justify-content: center; flex-wrap: wrap;} /*News*/ .news { height:500px; width:100%; background-color:#fff; align-items:center; } /*Store*/ .store { height:500px; width:100%; background-color:#f9f9f9; align-items:center; } .search-button { float: left; margin-top:7px; } .search-button button { width: 1.1em; height: 1.1em; margin-top:3px; margin-left:15px; border-radius: 1em; border: 0.9px solid #000; content:""; background-color:transparent; display: block; } .search-button button:after { display: block; content: ""; width: .09em; height: 0.6em; background-color: #000; transform:rotate(40deg); -ms-transform:rotate(40deg); -moz-transform:rotate(40deg); -webkit-transform:rotate(40deg); margin-top: .7em; margin-left: -0.6em;} .search-button button:hover{ cursor:pointer;} .search-button button:focus{ outline:none;} .search-popup { display: none; position: fixed; top: 0; right: 0; left: 0; bottom: 0; } .search-bg { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-color: rgba(0, 0, 0,); } .search-popup label { color: white; } .search-form { display: block; margin: 7em 4em; position: relative; right: -100%; } .form { position: relative; } .form input { outline: none; border-width: 0 0 1px 0; border-style: none none solid none; border-color: #dad6d5; background-color: transparent; width: 100%; padding: 1em 0; color: grey; } .form input:focus::-webkit-input-placeholder { opacity: 0; } .form input:focus::-moz-placeholder { opacity: 0; } .form input:-ms-input-placeholder { opacity: 0; } .form input:focus:-moz-placeholder { opacity: 0; } .form label { position: absolute; top: 25%; right: 0; } </style> 

 <!--Smooth Scrolling JavaScript!--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!--Search!--> <div class="search-button"> <button id="search"></button> <div class="search-popup"> <div class="search-bg"></div> <div class="search-form"> <form action=""> <div class="form"> <input type="text" id="search" placeholder="VSCO Search"> <label for="search"><i class="fa fa-search"></i></label> </div> </form> </div> </div> </div> <!--VSCO Navigation Bar!--> <div class="nav-bar"> <ul> <li><a href="#store">Store</a></li> <li><a href="#news">News</a></li> </ul> </div> 

Answer 1

Most likely this style is causing the undesired behavior

.form input:-ms-input-placeholder {
  opacity: 0;
}

You are hiding the input so nothing is being shown when you click on the search icon