WordPress搜索表单和输入类型=“Image”

我需要有关此代码的帮助。单击搜索图标时，如何获取要显示的搜索字段。svg？

<form role="search" method="get" class="search-form" action="<?php echo home_url( \'/\' ); ?>">
<label>
    <span class="screen-reader-text"><?php echo _x( \'Search for:\', \'label\' ) ?></span>
    <input type="search" class="search-field"
        placeholder="<?php echo esc_attr_x( \'Search …\', \'placeholder\' ) ?>"
        value="<?php echo get_search_query() ?>" name="s"
        title="<?php echo esc_attr_x( \'Search for:\', \'label\' ) ?>" />
</label>
<input type="image" alt="Search" src="<?php bloginfo( \'template_url\' ); ?>/images/search-icon.svg" />

.site-header .search-field  {
    background-color: transparent;
    border: none;
    cursor: pointer;
    height: 37px;
    padding: 0 0 10px 34px;
    position: relative;
    -webkit-transition: width 400ms ease, background 400ms ease;
    transition:         width 400ms ease, background 400ms ease;
    width: 0;
}
.site-header .search-field:focus  {
    background-color: #fff;
    border: 2px solid #333;
    cursor: text;
    outline: 0;
    width: 230px;
}
.search-form
.search-submit {
    display:none;
}
input[type="image"] {
    height: 30px;
}

<style type="text/css"> body { margin: 0; padding: 30px 0; font-family: arial; font-size: 16px; line-height: 22px; max-width: 800px; margin: 0 auto; overflow: hidden; } body:after { content: \'\'; clear: both; display: table; } img{ max-width: 100%; display: inline; max-height: 100%; } form#search-form { float: left; width: 80%; display: none; } button#search { float: right; width: 20%; padding: 8px; height: 50px; cursor: pointer; text-align: center; margin-top: 21px; } input.search-field { display: block; padding: 11px; font-size: 20px; width: 100%; } </style>  <form id="search-form" action=""> <span class="screen-reader-text">Search for:</span> <input type="search" class="search-field" placeholder="Search..." name="s" /> </form>  <button id="search"><img src="https://image.flaticon.com/icons/svg/54/54481.svg" alt="Search Icon" /></button>  <script type="text/javascript"> var button = document.getElementById("search"); button.addEventListener(\'click\', function() { var form = document.getElementById("search-form"); if( form.style.display === "block" ) { form.style.display = "none"; } else { form.style.display = "block"; } console.log("clicked..."); }); </script>

小码农CODE

相关推荐

将架构添加到搜索结果页面的正文。已尝试使用IS_SEARCH