选择将无法正确对齐

Question

我有一个表单，在两个文本框之间选择，并且选择与其他文本框的顶部不完全对齐。 See screenshot

它与边框半径0对齐得很好，但是当我尝试像其他输入一样设置样式时，对齐方式就会消失。其余的输入的边界半径为3.我注意到，当我将边界半径从1增加到3时，选择的对齐会变得更糟。

这是我输入的CSS并选择：

＆＃13;

＆＃13;

input {
		display: inline-grid;
		height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 3px;
	}

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 50%;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhE=truncatedonpurpose);
    padding: .5em;
    padding-right: 1.5em;
		border-radius: 3px;
		min-width: 110px;
		height: 46px;
		margin-right: 5px;
	}

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

<div class="form-group form-group-depth-1 form-group-city"><input type="text" id="tfid-57-5" name="city" placeholder="City" class="form-control" value="Jackson"></div>
<div class="form-group form-group-depth-1 form-group-state"><select id="tfid-57-6" name="state" class="form-control"><option value="">-</option><option value="AK">AK</option><option value="AL">AL</option><option value="AR">AR</option><option value="AS">AS</option><option value="WA">WA</option><option value="WI">WI</option><option value="WV">WV</option><option value="WY">WY</option></select></div>
<div class="form-group form-group-depth-1 form-group-zipCode"><input type="text" id="tfid-57-7" name="zipCode" placeholder="Zip code" class="form-control" value="73555"></div>

＆＃13;

＆＃13;

＆＃13;