ブートストラップボタンのテキストが表示されない

Question

私は単純なinput-groupを持っています。このフィールドには、入力フィールドとボタンが含まれています。

奇妙なことは、表示されません。色はbackground-colorと同じではなく、checked要素でチェックされます。

私はJSfiddleを作成しましたが、それは完全にそこに示し原因となるが、何もしない...

https://jsfiddle.net/u691aw17/

はたぶん皆さんのアイデアを持っていますか？

<!-- language: lang-css --> 

/* CSS */ 

div.input-group { 
    width: 350px; 
    margin-left: auto; 
    margin-right: auto; 
    font-size: 14px; 
    input[type="text"]{ 
     width:300px; 
     height:50px; 
     font-size: 14px; 
    } 
    input[type="text"]::-webkit-input-placeholder{ 
     text-transform: uppercase; 
     font-size: 14px; 
    } 
    input[type="text"]:-moz-placeholder /* Firefox 18- */ 
      { 
     text-transform: uppercase; 
     font-size: 14px; 
    } 
    input[type="text"]::-moz-placeholder /* Firefox 19+ */ 
      { 
     text-transform: uppercase; 
     font-size: 14px; 
    } 
    input[type="text"]:-ms-input-placeholder{ 
     text-transform: uppercase; 
     font-size: 14px; 
    } 
    span.input-group-btn button.btn { 
     width:150px; 
     height:50px; 
     line-height: 1em; 
     padding: 0px; 
    } 
} 
.btn { 
    background-color: green; 
    color:#ffffff; 
} 

<!-- language: lang-html --> 

    <div class="input-group"> 
     <input type="text" class="form-control" placeholder="Email"> 
     <span class="input-group-btn"> 
      <button class="btn" type="button" >Sign up</button> 
     </span> 
    </div> 


<!-- end snippet --> 

Answer 1

フィドルでは完全に動作するので、明らかに残りのスタイルには問題があります。

おそらくfont-size: inheritが問題であると推測しています（親からフォントサイズ0を継承しています）。そのルールを上書きするには、フォントサイズをボタンに設定します。

Answer 2

何のブートストラップCSSはありませんので、私はそれはあなたのフィドルで働くかもしれないと思います。ブートストラップ.btnクラスのCSSをオーバーライドしようとしていますが、ブートストラップでは、より具体的にする必要があることがよくあります。 idをボタンに追加し、それをCSSセレクタとして使用します。