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

Question

我有一个问题在我的wordpress标题添加搜索按钮。

我发现，当我在一个空的span类旁边添加输入类型文本时，span类搜索图标在刷新页面后会被删除。知道我该怎么解决这个吗？

这是我的代码

<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代码，这将帮助您。你可能得调整一下位置。

null

.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 */
}