Html 在Firefox/IE中正确设置搜索框格式

我有一个用CSS设计的搜索框。在Chrome和Safari中，一切看起来都很好。但是，在我下面的图片中，你可以看到在火狐搜索框的中间有一个随机的框，同样的随机框，箭头在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>

---

您忘记关闭

标签。这样做会让事情变得更好

发生在我们最好的人身上！）

.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;
}