0

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

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

这是我的输入和选择CSS：

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

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;
	}

<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>

4

0 回答 0