There is a block with a search form that works properly, but has a validation error.
Error: Unclosed element form.
Code:
* { box-sizing: border-box; } body { background-color: #000; } .search-box { max-width: 300px; text-align: center; width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } ul.cols { display: table; table-layout: fixed; width: 100%; padding: 0px; margin: 0px; position: relative; } .search-box ul.cols li { padding: 0px; margin: 0px; } ul.cols>li { display: table-cell; list-style-type: none; vertical-align: middle; position: relative; padding: 0px; margin: 0px; } ul li { padding: 0px; margin: 0px 0px 20px 20px; text-align: left; } .search-box ul.cols li:nth-child(2) { width: 50px; } .search-box form { width: 100%; box-shadow: 0px 0px 250px 100px rgba(255, 255, 255, 1)!important; margin: 0px; } .search-box input[type="text"] { width: 100%; background: #363636; font-family: "gothampro-light", Arial, Helvetica, sans-serif; font-size: 20px; color: #ffffff; padding: 15px; display: inline-block; margin: 0px; border: 0px; } .search-box a { display: inline-block; padding: 0px 15px; transition: all 0.2s linear; } .search-box a svg { width: 48px; height: 48px; } <div id="search-box" class="search-box"> <ul class="cols"> <li> <form id="frm_search_top" action="{$search_url}" method="get"> <input type="text" id="search_top" name="search" /> </li> <li> <a href="#search" onclick="$('#frm_search_top').submit();"><svg viewBox="0 0 20 20"><path d="M19.5,17.2c0,0-4.3-4.3-4.4-4.4c0.9-1.3,1.4-2.8,1.4-4.5c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.7,0,3.2-0.5,4.5-1.4l4.4,4.4c0.7,0.7,1.7,0.7,2.4,0C20.2,19,20.2,17.9,19.5,17.2zM8.2,13.7c-3,0-5.4-2.4-5.4-5.4s2.4-5.4,5.4-5.4s5.4,2.4,5.4,5.4S11.2,13.7,8.2,13.7z"/></svg></a> </form> </li> </ul> </div> If I take a form beyond the ul list, I get a distortion of the background with the search icon.
Code:
* { box-sizing: border-box; } body { background-color: #000; } .search-box { max-width: 300px; text-align: center; width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } ul.cols { display: table; table-layout: fixed; width: 100%; padding: 0px; margin: 0px; position: relative; } .search-box ul.cols li { padding: 0px; margin: 0px; } ul.cols>li { display: table-cell; list-style-type: none; vertical-align: middle; position: relative; padding: 0px; margin: 0px; } ul li { padding: 0px; margin: 0px 0px 20px 20px; text-align: left; } .search-box ul.cols li:nth-child(2) { width: 50px; } .search-box form { width: 100%; box-shadow: 0px 0px 250px 100px rgba(255, 255, 255, 1)!important; margin: 0px; } .search-box input[type="text"] { width: 100%; background: #363636; font-family: "gothampro-light", Arial, Helvetica, sans-serif; font-size: 20px; color: #ffffff; padding: 15px; display: inline-block; margin: 0px; border: 0px; } .search-box a { display: inline-block; padding: 0px 15px; transition: all 0.2s linear; } .search-box a svg { width: 48px; height: 48px; } <div id="search-box" class="search-box"> <form id="frm_search_top" action="{$search_url}" method="get"> <ul class="cols"> <li> <input type="text" id="search_top" name="search" /> </li> <li> <a href="#search" onclick="$('#frm_search_top').submit();"><svg viewBox="0 0 20 20"><path d="M19.5,17.2c0,0-4.3-4.3-4.4-4.4c0.9-1.3,1.4-2.8,1.4-4.5c0-4.5-3.7-8.2-8.2-8.2S0,3.7,0,8.2s3.7,8.2,8.2,8.2c1.7,0,3.2-0.5,4.5-1.4l4.4,4.4c0.7,0.7,1.7,0.7,2.4,0C20.2,19,20.2,17.9,19.5,17.2zM8.2,13.7c-3,0-5.4-2.4-5.4-5.4s2.4-5.4,5.4-5.4s5.4,2.4,5.4,5.4S11.2,13.7,8.2,13.7z"/></svg></a> </li> </ul> </form> </div> How to fix it?
