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

Question

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

我怎样才能在我的CSS中修复它，以便正确格式化中间的箭头，就像在Firefox中一样，中间的绿框完全消失了？

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">标记了。这样做会让事情好一点！