Issue with CSS Text box rendering in IE

Question

I have been trying to build a search engine using basic HTML and CSS for my Uni but IE just doesnt seem to like text boxes. Works perfectly fine in Chrome and Edge but for some reason doesnt work well in IE.

Screenshots attached below. Image in IE Image in Chrome

Any help would be highly appreciated.

Code for the search box and the search text button:

 .search-box { position: absolute; top: 260px; left: 46%; transform: translate(-50%, -50%); background: #2f3640; height: 60px; border-radius: 40px; padding: 10px; } .search-box:hover > .search-text { width: 350px; padding: 0 6px; } .search-box:hover > .search-btn { background: white; } .search-btn { color: #e84118; float: right; width: 40px; height: 40px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: #2f3640; display: flex; justify-content: center; align-items: center; transition: 1s; } .search-text { font-family: VFRegular; border: 1px red solid; background: none; outline: none; float: left; padding: 0; color: white; font-size: 16px; -webkit-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s; line-height: 40px; width: 0px; } /* .search-box:hover ~ .category-box { width: 400px; opacity: 1; visibility: visible; } .category-box:hover { width: 400px; opacity: 1; visibility: visible; } .category-box { position: absolute; align-items: center; top: 38%; left: 50%; text-decoration-color: white; transform: translate(-50%, -50%); background: #2f3640; height: 60px; border-radius: 40px; padding: 10px; width: 0px; color: white; visibility: collapse; opacity: 0; transition: width 1s, height 1s, transform 1s; transition: opacity 1s; } */ .search-box > ul { left: -100px; background-color: #2f3640; color: white; border-radius: 10px; list-style-type: none; font-size: 15px; } .search-box > ul li { left: -10px; margin: 0 0 10px 0; border-bottom: 1px solid white; z-index: 1; } .search-box > ul li:last-child { margin: 0 0 10px 0; border-bottom: 1px solid transparent; } .search-box > ul li:hover { color: red; }

 <div class="entire-searchbox"> <div class="search-box"> <input class="search-text" type="text" placeholder="Type to search"> <a class="search-btn" href="#"> <i class="fas fa-search"></i> </a> <ul id="testListDummy"> </ul> </div> </div>

Answer 1

你能在 .search-box 类中设置 400px 吗？

Answer 2

Try to add the height property for the .search-text, code as below:

    .search-text {
        font-family: VFRegular;
        border: 1px red solid;
        background: none;
        outline: none;
        float: left;
        padding: 0;
        color: white;
        font-size: 16px;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        transition: 0.5s;
        line-height: 40px;
        width: 0px;
        height:58px;
    } 

The output as below: