select.form-control and input[type=text].form-control are different heights

[cvrebert]

No description provided.

[arthurbath]

Selects are a pain. Safari renders them with an undesirable background gradient, and Firefox attaches that awful Win98-esque dropdown button. But if you set appearance: none, they lose their up-down arrow indicators.

Here's an extension for select.form-control that I've been using that strips the appearance, then adds the dropdown indicator back via a base64 SVG (courtesy Entypo):

select.form-control {
  -moz-appearance: none;
  -webkit-appearance: none;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgMTAgMTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPlVudGl0bGVkPC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPjwvZGVmcz4gICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+ICAgICAgICA8ZyBpZD0ic2VsZWN0LWFycm93cyIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCIgZmlsbD0iIzAwMDAwMCI+ICAgICAgICAgICAgPHBhdGggZD0iTTUsMCBMMCw3IEwxMCw3IEw1LDAgTDUsMCBaIE01LDE4IEwxMCwxMSBMMCwxMSBMNSwxOCBMNSwxOCBaIiBpZD0iU2hhcGUiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==);
  background-size: .5em;
  background-repeat: no-repeat;
  background-position: right .5em center;
  padding-right: 2em;
  overflow: hidden;
  text-overflow: ellipsis;
}

Got a little frustrated by the text abruptly cutting off at the padding line, so I also added the text-overflow: ellipsis, too, though it's not entirely necessary. Not sure if there are problems with this solution (screen readers?) that would make it unsuitable for official inclusion.

Chrome

Chrome (input-sm)

Firefox

Safari

[cvrebert]

@arthurbath What you're proposing is something more appropriate for the completely custom form controls (http://v4-alpha.getbootstrap.com/components/forms/#select-menu ), not our vanilla .form-control, which is supposed to be native-ish (well, as native as the browser engine itself allows).

[cvrebert]

CC: @mdo

[mdo]

Fixed in caa36b8.

[cvrebert]

@mdo Still not quite right (OS X Chrome):

[eliottrobson]

Is this a similar issue to #18786 ?

[cvrebert]

@eliottrobson Only slightly.

[eliottrobson]

@cvrebert when I was looking at that issue I did notice that my changes did alter the height of the select element. But the way I did it isn't ideal, hard-coded heights etc... Is there any way we can apply the same logic but calculate the values?

[torbjoernk]

I might miss something, but does the addition introduced by caa36b8 have to be extended/duplicated for .form-control-sm and .form-control-lg with height: $input-height-sm; and height: $input-height-lg; respectively?

[cvrebert]

@torbjoernk Quite possibly. See #19771.

[leetskills]

I found that the issue for me was the top & bottom border widths being added to the calculated height of text form controls, but not being part of the $input-height calculation. Would something like the below be a valid fix?

$input-height: (($font-size-base * $input-line-height) + ($input-padding-y * 2)) + ($input-btn-border-width * 2);

Note: in order to do this, I had to set $border-width to .0625rem (equivalent to 1px based on 16px $font-size-base.

I also used $input-line-height rather than $line-height-base, and applied these changes to the -sm/-lg variations, but the heights for those are still off as the calculated line height doesn't round to a whole number.