CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
C.Ronaldo
C.Ronaldo

Reputation: 611

Bootstrap button text not visible

I have a simple input-group which contains a input-field and button.

The strange thing is, it doesn't show up. The color isn't the same as background-color, checked in inspect element.

I've created a JSfiddle, but that doesn't do anything, cause it shows perfectly there...

https://jsfiddle.net/u691aw17/

Maybe you guys have an idea?

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

Problem

Element inspect

Upvotes: 2

Views: 4788

Answers (3)

nouman
nouman

Reputation: 1

Select button text not showing due to its padding. You can set height:auto to show the text of select button. Or set padding of select button to 0 (Zero) to see the text not appearing.

Upvotes: 0

Gabriel
Gabriel

Reputation: 2190

Clearly it is a problem with the rest of the styles because in Fiddle works perfectly.

I'm guessing maybe the font-size: inherit is the problem (it's inheriting font size 0 from its parent). Set a font size to the button to override that rule.

Upvotes: 3

jaredsk
jaredsk

Reputation: 2786

I think it might be working in your fiddle because there's no Bootstrap CSS. You're trying to override the Bootstrap .btn class CSS, but with Bootstrap you often have to be more specific (as in specificity) than that. Add an id to the button and use that as your CSS selector.

Upvotes: -1

Related Questions