在Wordress中的输入类型文本旁边添加时，自动删除空跨度类

Question

我的wordpress标头添加搜索按钮时遇到问题。

我发现，当我在空的span类旁边添加输入类型文本时，刷新页面后，span class搜索图标将删除。 知道我该如何解决吗？

这是我的代码

<style>
@font-face {
font-family: 'icomoon';
src:url('../wp-content/plugins/search-extend/fonts/icomoon/icomoon.eot? 
#iefix') format('embedded-opentype'),
url('../wp-content/plugins/search-extend/fonts/icomoon/icomoon.ttf') 
format('truetype');
}

.sb-icon-search {
color: #fff;
background: #00c80e;
z-index: 90;
font-size: 22px;
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
 }

.sb-icon-search:before
 {
content: "\e000";
 }
 </style>

 <div id="sb-search" class="sb-search">
   <form>
     <input class="sb-search-submit" type="text" value="">          
     <span class="sb-icon-search"></span> #This removes automatically after 
   refreshing the page
   </form>
 </div>

我已经尝试过此功能

function override_mce_options($initArray) {
$opts = '*[id|name|class|style]';
$initArray['valid_elements'] .= ',' . $opts;
$initArray['extended_valid_elements'] .= ',' . $opts;
return $initArray;
}
add_filter('tiny_mce_before_init', 'override_mce_options'); 

但是似乎问题不是来自文本编辑器，因为我尝试将输入类型“ text”更改为“ submit”，所以效果很好。 即使我检查也已全部移除。 有任何想法吗？ 请帮忙。

Answer 1

好像编辑器正在删除它。

我认为您可以将搜索直接添加到sb-search项目而不是图标。 我添加了css代码，它将对您有所帮助。 您可能需要调整位置。

 .sb-search { position: relative; /* other css properties */ } .sb-search:before { content: "\\e000"; color: #fff; background: #00c80e; z-index: 90; font-size: 22px; font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; position: relative; -webkit-font-smoothing: antialiased; position: absolute; right: 0; top: 0; /* You might have to adjust the position */ } 

这样，您不必担心span元素，可以将其删除。