input padding cutting out text in firefox

Question

In firefox when I use a bootstrap form-control input element, if I pad the input element it cuts out the text by padding inwards rather than around the text. It only seems t

Answer 1

The Bootstrap form-control class gets a fixed height by default. Just add a height: auto; to your .join-form selector(to keep flexibility), and change the padding to get the original effect, like this padding: 14px 20px;

See here: http://jsfiddle.net/x78Bh/

Answer 2

Add height property then apply the padding like below. Now you can see both firefox and chrome will behave same.

.join-form {
padding: 20px; /*comment this out to see effect of padding */
margin: 12px 0px;
font-size: 16px;
letter-spacing: 0px;
font-weight: 300;
height:60px;
}

DEMO