Can't remove placeholder Uppercase
<p>I'm having a problem with the placeholder, not matter what I do, it's always uppercase. I've tried to add all the css style I can find that should help, but no luck so far. Can someone tell me why this happens`?</p>

<p><strong>My css for my searchbar</strong></p>

<pre><code>#navigation-bar {
    height: 100%;
    width: 500px;
    float: right;
}

#search {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 100%;
}

#label {
    width: 60px;
    height: 100%;
    position: relative;
    z-index: 20;
}

#label label {
    display: block;
    width: 60px;
    height: 100%;
    background: url("../../images/search.png") no-repeat center center;
    font-size: 0;
    color: rgba(0, 0, 0, 0);
    text-indent: -9999px;
    cursor: pointer;
}

#label label:hover {
    background: url("../../images/search.png") no-repeat center center;
}

#label.active label {
    background: url("../../images/search.png") no-repeat center center;
}

#input {
    position: absolute;
    top: 0;
    right: 60px;
    width: 450px;
    height: 100%;
    z-index: 5;
    overflow: hidden;
}

#input input {
    display: block;
    position: absolute;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100%;
    margin: 0;
    padding: 0 10px;
    border: none;
    background-color: #333;
    color: #fff;
    font-size: 18px;
    backface-visibility: none;
    border-radius: 0;
    transition: left 0;
}


#input input:focus {
    outline: none;
}

#input.focus {
    z-index: 20;
}

#input.focus input {
    right: 0;
    transition: right 0.3s;
}


::-webkit-input-placeholder {
    text-transform: none;
}
:-moz-placeholder {
    text-transform: none;
}
::-moz-placeholder {
    text-transform: none;
}
:-ms-input-placeholder {  
    text-transform: none;
}
</code></pre>

<p><strong>Html</strong></p>

<pre><code>&lt;div class="content-container"&gt;
    &lt;div class="top-wrapper"&gt;
        &lt;div class="top"&gt;
            &lt;div class="navigation"&gt;
                &lt;div class="container"&gt;
                    &lt;div class="navbar-collapse collapse"&gt;
                        &lt;div id="navigation-bar" class="clearfix"&gt;
                            &lt;form id="search" onkeypress="return event.keyCode != 13;" action="@Model.SearchPageUrl" method="post"&gt;
                                &lt;div id="input"&gt;&lt;input type="text" name="search-terms" id="search-terms" placeholder="@Model.SearchPlaceholder"&gt;&lt;/div&gt;
                                &lt;div id="label"&gt;&lt;label for="search-terms" id="search-label"&gt;search&lt;/label&gt;&lt;/div&gt;
                            &lt;/form&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>Image of the problem</strong>
<a href="https://i.stack.imgur.com/yL1Lo.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yL1Lo.jpg" alt="enter image description here"></a></p>