搜索表单样式 CSS答案

【问题标题】：Search Form Styling CSS搜索表单样式 CSS
【发布时间】：2017-12-05 01:13:35
【问题描述】：

所以我在博客的顶部横幅上设置了我的搜索表单的样式，但是当我离开主页到另一个页面时，背景图像搜索图标消失了！关于为什么会发生这种情况的任何建议？谢谢 ;-) http://demo.boxofficeboxing.co.uk

#s {
   padding:8px 6px;
   background:rgba(0, 0, 0, 0);
   border-style: solid;
   border-color: #fff;
   border-width: 1px 0px 1px 1px;
   font-family:open sans;
   font-size:14px;
   color: #fff;
   }
   #searchsubmit {
   cursor:pointer;
   position:relative;
   padding:8px 16px;
   left:-9px;
   border-style: solid;
   border-color: #fff;
   border-width: 1px 1px 1px 0px;
   background-color: #a88f4b; 
   font-family:open sans;
   font-size:14px;
   background-image: url('wp-content/uploads/2017/12/search.png'); 
   background-position: center center; 
   background-repeat:no-repeat;
   text-indent: -9999px; 
   }
   ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
   color: white;
   }
   ::-moz-placeholder { /* Firefox 19+ */
   color: white;
   }
   :-ms-input-placeholder { /* IE 10+ */
   color: white;
   }
   :-moz-placeholder { /* Firefox 18- */
   color: white;
   }
   input:focus {
   outline: none; 
   }

【问题讨论】：

标签： css wordpress styling search-form

【解决方案1】：

破解很简单..

图片图标的路径设置为

wp-content/uploads/2017/12/search.png

所以当在主页 - 网址变成

http://demo.boxofficeboxing.co.uk/wp-content/uploads/2017/12/search.png

当在页面内部时 - 比如说视频集锦 - 网址变成了

http://demo.boxofficeboxing.co.uk/videos-highlights/wp-content/uploads/2017/12/search.png

解决此问题的一种方法是将 css 中的 URL 设置为

/wp-content/uploads/2017/12/search.png

这应该可以解决您的问题/问题。

【讨论】：

你好 Blakdronzer，谢谢你的帮助，一切都搞定了 ;-)

【解决方案2】：

您对图像的引用是相对的，所以当您转到另一个页面时，它的引用是错误的。将您的 background-image URL 值设为绝对值。

【讨论】：

【解决方案3】：

提供给background-image 的网址wp-content/uploads/2017/12/search.png 是相对的，因此当它在您的主页上运行时，例如，如果您导航到/news/ 部分，则变为http://demo.boxofficeboxing.co.uk/news/wp-content/uploads/2017/12/search.png 而不是http://demo.boxofficeboxing.co.uk/wp-content/uploads/2017/12/search.png。只需给它一个带有http://... 的绝对网址就可以了。

【讨论】：