时间戳

首页 > 解决方案 > 50% 的边界半径在提交但不是文本输入

css - 50% 的边界半径在提交但不是文本输入

问题描述

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

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>

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

标签： css

解决方案

尝试使用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>

推荐阅读