Loading... ## 预览图如下 ###电脑端效果:  ###移动端效果:  ## 在自定义小工具中首页添加一个幻灯片,并将以下代码加入幻灯片文案或幻灯片简介中 ```html <form method="get" id="searchform" action="?php echo esc_url( home_url() ) ?>"> <!--action 属性规定当提交表单时,向何处发送表单数据。?php echo esc_url( home_url() ) ?>--> <div class="container"> <div id="searchs"> <input type="text" placeholder="输入关键词搜索..." name="s" id="s" class="searchInput" autocomplete="off" /> <input class="n-button" type="submit" onclick="if(document.forms['search'].searchinput.value=='- Search -')document.forms['search'].searchinput.value='';" value="搜索" /> </div> </div> </form> ``` ##后台自定义CSS样式 ```css /*幻灯片搜索样式*/ .n-button { top: 1px; right: -6px; width: 120px; height: 42px; border: 1px solid #ffffff14; border-radius: 5px; background: #504bcc; cursor: pointer; font-size: 16px; color: #fff; font-family: Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; } #searchs input[type="text"] { overflow: hidden; margin: 0 auto; padding-left: 19px; width: 600px; height: 42px; border: 1px solid #ffffff14; border-radius: 4px; background: rgb(255 255 255 / 62%); box-shadow: none; color: #757575; font-size: 14px; line-height: 32px; font-family: Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; } /*幻灯片手机搜索样式*/ @media (max-width: 934px) { #searchs input[type="text"] { width: auto; } .absolute .container { width: 100% !important; padding: 0; margin: 0; } .absolute #searchs { display: flex; flex-direction: column; align-items: center; } .absolute #searchs input[type="text"] { width: 100%; } .absolute .n-button { width: 30%; margin-top: 4px; } } ``` 最后修改:2022 年 07 月 09 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 0 如果觉得我的文章对你有用,请随意赞赏