50% 边框半径用于提交但不用于文本输入

Question

我正在尝试创建一个带有文本输入和提交按钮的表单。我想要圆角。它在提交按钮上正常工作，但在文本输入上不正常：

form {
    display:flex;
    justify-content:flex-start;
}
    form input[type="text"] {
        padding:5px 10px;
        border:1px solid #d7d7d7;
        border-right:none;
        border-top-left-radius: 50%;
        border-bottom-left-radius: 50%;
    }
    form input[type="submit"] {
        background:#000;
        border:1px solid #000;
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
        outline:none;
    }

<form method="get" action="">
	<input name="s" type="text" placeholder="Search">
	<input type="submit" value="">
</form>

我怎样才能使文本输入的左角像在提交按钮上一样四舍五入？

Answer 1

尝试使用em代替%.

form {
    display:flex;
    justify-content:flex-start;
}
    form input[type="text"] {
        padding:5px 10px;
        border:1px solid #d7d7d7;
        border-right:none;
        border-top-left-radius: 1em;
        border-bottom-left-radius: 1em;
    }
    form input[type="submit"] {
        background:#000;
        border:1px solid #000;
        border-top-right-radius: 1em;
        border-bottom-right-radius: 1em;
        outline:none;
    }

<form method="get" action="">
	<input name="s" type="text" placeholder="Search">
	<input type="submit" value="">
</form>