在 Wordpress 中的输入类型文本旁边添加时自动删除空 Span 类答案

【问题标题】：Auto Remove of Empty Span Class When Added Beside Input Type Text in Wordress在 Wordpress 中的输入类型文本旁边添加时自动删除空 Span 类
【发布时间】：2019-12-30 10:01:33
【问题描述】：

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

我发现当我在空跨度类旁边添加输入类型文本时，跨度类搜索图标会在刷新页面后移除。知道如何解决这个问题吗？

这是我的代码

<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');

但似乎问题不在于文本编辑器，因为我尝试更改输入类型“文本”输入“提交”它工作正常。即使我检查它也全部删除。请问有什么想法吗？请帮忙。

【问题讨论】：

它还在 DOM 中吗？还是在您检查时将其从其中移除？
即使我检查它仍然被删除

标签： html css wordpress

【解决方案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 元素了，你可以移除它。

【讨论】：