CODEWITHSUNDEEP
htmlcssinternet-explorerfirefoxformatting
Rataiczak24
Rataiczak24

Reputation: 1042

Formatting Search Box Correctly in Firefox/IE

I have a search box that is styled with CSS. Everything looks good in both Chrome and Safari. However, in my pictures below, you can see that there is a random box in the middle of the search box in Firefox and the same random box, along with the arrow being out of place in IE.

How can I go about fixing this in my CSS so that they are formatted correctly with the arrow in the middle like it is in Firefox and that green box in the middle completely gone?

Firefox example: enter image description here

IE example: enter image description here

Search box 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 for search box:

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

Upvotes: 0

Views: 45

Answers (1)

nncho
nncho

Reputation: 165

You forgot to close your <span class="arrow"> tag. Doing it make things a bit better!

Upvotes: 1

Related Questions