プレースホルダを削除できません。大文字

Question

プレースホルダに問題があります。何をするにしても、常に大文字です。私は助けてください見つけることができるすべてのCSSスタイルを追加しようとしましたが、これまで運がありません。誰かがなぜこれが起こるのか教えてもらえますか？問題の私の検索バーのための

マイCSS

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

HTMLは

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

画像

Answer 1

は、私はあなただけでを行うことができると思ういけません

input::-webkit-input-placeholder { 
    text-transform: lowercase; 
} 

Answer 2

は私が@Bradは何を言っているんだろうだけでなく、私はまた、あなたのスタイルに!importantを追加します。

は、最初にそうように入力しspecificyingしてみてください。これにより、あなたの入力要素を引き継ぐ他のスタイルがないことを願っています。

input::-webkit-input-placeholder { 
    text-transform: inherit !important; 
} 
input:-moz-placeholder { 
    text-transform: inherit !important; 
} 
input::-moz-placeholder { 
    text-transform: inherit !important; 
} 
input:-ms-input-placeholder { 
    text-transform: inherit !important; 
} 

Answer 3

::-webkit-input-placeholder { 
    text-transform: none; 
} 
:-moz-placeholder { 
    text-transform: none; 
} 
::-moz-placeholder { 
    text-transform: none; 
} 
:-ms-input-placeholder { 
    text-transform: none; 
} 

をこのコードます：残念ながら、あなたは

input::-webkit-input-placeholder { 
    text-transform: none !important; 
} 
input:-moz-placeholder { 
    text-transform: none !important; 
} 
input::-moz-placeholder { 
    text-transform: none !important; 
} 
input:-ms-input-placeholder { 
    text-transform: none !important; 
} 

（少なくとも私がすることができていない）プレースホルダのプロパティを「検査」私はまた、代わりにinheritを使用して提案することができることができません書いている、あなたがしたいことをする、それは動作するはずです。私はあなたがそれが上書きされていないか、他のいくつかのより多くのprecide CSSセレクタによってチェックするべきだと思います。より正確なセレクタを追加してチェックしてみてください。例えば、

body input#search-terms::-webkit-input-placeholder { 
    text-transform: none; 
} 
body input#search-terms:-moz-placeholder { 
    text-transform: none; 
} 
body input#search-terms::-moz-placeholder { 
    text-transform: none; 
} 
body input#search-terms:-ms-input-placeholder { 
    text-transform: none; 
}