Question

我有一个简单的input-group，其中包含一个输入字段和按钮。

奇怪的是，它没有出现。颜色与背景颜色不同，在inspect元素中检查。

我已经创建了一个JSfiddle，但是它没有做任何事情，因为它完全显示在那里......

也许你们有个主意？

<!-- 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

显然，这是其他款式的问题，因为在Fiddle中效果很好。

我猜测font-size: inherit可能是问题（它从其父级继承字体大小为0）。将字体大小设置为按钮以覆盖该规则。

Answer 2

选择按钮文本由于其填充而未显示。您可以设置height：auto以显示选择按钮的文本。或将选择按钮的填充设置为0（零）以查看未显示的文本。

Answer 3

我认为它可能在你的小提琴中工作，因为没有Bootstrap CSS。您试图覆盖Bootstrap .btn类CSS，但是使用Bootstrap时，您通常必须更具体（如特殊性）。在按钮中添加一个id，并将其用作CSS选择器。

Bootstrap按钮文本不可见

3 个答案: