4

I am trying to style an input field and some buttons in a consistent way, but there seems to be some magic going on. Event though the input has the exact same classes as the buttons it is slightly higher. Also the placeholder text is vertically aligned differently the the inputted text (one pixel higher). Can this be solved with a cross-browser solution?

Edit: As pointed out by Jan Turoň the line height fixed the problem in Webkit. Now, if you check the codepen in Firefox you'll notice that the element still has a 1px border. How to get rid of that?

Thx, PS

Codepen

HTML

<form action="">
  <a href=""class="btn">Button</a>
  <input type="text" class="btn" placeholder="input"/>
  <button class="btn">Login</button>
  <a href=""class="btn">Button</a>
</form>

CSS

.btn, input, button {

  display: inline-block;
  vertical-align: middle;
  line-height: 15px;
  font-size: 15px;
  font-family: sans-serif;

  border: 0;
  padding: 0;
  margin: 0;

  cursor: pointer;
  cursor: hand;

  text-decoration: none;
  color: #f2f2f2;
  background-color: #1a1a1a;
  padding: 7px 12px 8px 12px;
  margin-right: 1px;
  margin-bottom: 1px;

}
Henrik Andersson
  • 45,354
  • 16
  • 98
  • 92
Peter Schmidler
  • 47
  • 5
  • Changing this line-height to 17px solved ur vertical spacing issue with the input being larger... Probably another way to do it also http://codepen.io/anon/pen/vbtJI – Michael May 20 '13 at 20:50
  • 1
    I wouldn't recommend using top and bottom padding on form elements. Instead, use absolute heights with correct line heights to get the desired effect. This way, no matter what browser you look through, it will always be the same height. – ntgCleaner May 20 '13 at 20:53

2 Answers2

2

The line-height doesn't shrink the input height below font-size plus some pixels see the MDN info:

On replaced inline elements, like buttons or other input element, line-height has no effect.

Just remove the line-height and you should get what you want even without applying heightstyle. Setting line-height to 130% also does seem to work.

Jan Turoň
  • 31,451
  • 23
  • 125
  • 169
0

I am trying to solve this for days and every solution is not whole, and not working in different browsers.

I find that this code do the work:

float: left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height: 33px;

I have updated Codepen - http://codepen.io/anon/pen/pvqRwE

Dampas
  • 323
  • 2
  • 6