5

input, select { padding: 2px; border: solid 1px red; }
<input value="Foo">
<select><option>bar!</option></select>

Even though these both have the same padding and border-width, the resulting <select> is clearly taller than its corresponding <input>. (tested in Firefox)

<select> is taller than <input> with same padding and border-width

Can you explain the reasoning behind the height difference? If I remove padding or border-width rules then the problem goes away. Unfortunately that's not a good solution for my project.

I am hoping to have pixel-perfect layouts that are cross-browser consistent, even with mobile browsers. Thus far, I've always been maintaining a different padding for <select> than I have for <input>, but would prefer if I could use one setting for both.

We found a simple CSS rule to solve a similar question in regarding <button>s in Firefox. I know it may not be so simple for <select> I posted this question to find out for sure.

Community
  • 1
  • 1
700 Software
  • 85,281
  • 83
  • 234
  • 341

2 Answers2

0

You really can't style <select> elements with css and expect them to look the same on different browsers - or even expect your rules to be applied for that matter. Browsers all handle form elements in their own special way - if you want something that looks the same everywhere I suggest you try Select2 or a similar replacement plugin.

Even your snippet for example, in Chrome on OS X 10.8 the <input> is actually taller than the <select> and does not resemble your screenshot:

enter image description here

But those new buttons though..
  • 21,377
  • 10
  • 81
  • 108
  • I already knew they would not look exactly the same, but I did think they were consistently taller. It is interesting to see that the select is actually shorter in OS X. – 700 Software May 30 '16 at 19:34
  • It seems that the ` – 700 Software May 30 '16 at 19:37
  • it's just one of those irritating things about front end web design that's a complete coin toss. it varies from browser to browser and OS to OS - even different versions of the *same OS* can render different height, width, borders, etc. As cumbersome as it may be, that's why I suggested using Select2 or something along those lines. – But those new buttons though.. May 30 '16 at 19:42
-1

Every browser has its default css and so you can not trust on displayed height and margins and other properties except you clear all default styles and set your own values. I suggest adding height and box-sizing and also vertical-align to gain your own result:

input, select { 
  padding: 2px; border: solid 1px red;
  height:20px;
  box-sizing:border-box;
  vertical-align:middle;
}
<input value="Foo">
<select><option>bar!</option></select>
Ali Sheikhpour
  • 10,475
  • 5
  • 41
  • 82
  • I want the height to be automatic based on font size. In your snippet, the text of the select is partially cropped: http://i.stack.imgur.com/bg6Xe.png. I am hoping for a rule that disables the extra (browser-specific) spacing. – 700 Software May 30 '16 at 18:55
  • Looking at your post again, I do like the idea of using a larger (less likely to be cropped) `height`, and then removing the vertical padding. This with `vertical-align: middle` makes for a pretty cool way to get consistency, but I'm not sure of the compatibility of `vertical-align` between `` and also across other browsers. – 700 Software May 30 '16 at 18:57
  • Text of input and select field are automatically vertical aligned. However using `line-height` and `height` together is safer. `vertical-align:middle` makes the input and select to stay in same baseline. – Ali Sheikhpour May 30 '16 at 19:05