html - 在 Firefox/IE 中正确格式化搜索框

Question

我有一个使用 CSS 设置样式的搜索框。在 Chrome 和 Safari 中一切看起来都不错。但是，在我下面的图片中，您可以看到在 Firefox 中的搜索框中间有一个随机框，在 IE 中也有相同的随机框，并且箭头错位了。

我怎样才能在我的 CSS 中解决这个问题，以便它们像在 Firefox 中一样正确地格式化为中间的箭头，并且中间的绿色框完全消失？

火狐示例:

IE 示例:

搜索框 HTML:

    <input name="ValueToSearch" class="search" type="text" placeholder="Value to Search">
<span class="arrow">            
    <button type="submit" class="button" name="search" value="Search">Search</button><br>

搜索框的 CSS:

.search {
    padding:8px 15px;
    background:rgba(50, 50, 50, 0.2);
    border:0px solid #dbdbdb;
}
.button {
    position:relative;
    padding:6px 15px;
    left:-8px;
    border:2px solid #007b54;
    background-color:#007b54;
    color:#fafafa;
}
.button:hover  {
    background-color:#fafafa;
    color:#207cca;
    cursor: pointer;
}


::-webkit-input-placeholder { /* For WebKit browsers */
    color: black;
    font-weight: bold;
}

:-moz-placeholder { /* For Mozilla Firefox 4 to 18 */
    color: black;
    font-weight: bold;
}

::-moz-placeholder { /* For Mozilla Firefox 19+ */
    color: black;
    font-weight: bold;
}

:-ms-input-placeholder { /* For Internet Explorer 10+ */
    color: black;
    font-weight: bold;
}


.arrow {
    position: relative;
    left: -8px;
    background: #007b54;
    padding: 8px 15px;
}

.arrow:after {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    border-color: rgba(32, 124, 202, 0);
    border-right-color: #007b54;
    border-width: 10px;
    margin-top: -10px;
}

Answer 1

您忘记关闭您的 <span class="arrow">标签。这样做会让事情变得更好!