1

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

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>

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

4

3 回答 3

5

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

于 2019-11-21T18:15:30.673 回答
3

您的 50% 是根据元素的宽度计算的。由于您的提交按钮非常窄并且您的文本输入更宽，因此边框半径看起来不同。您将需要使用其他一些绝对单位，例如 px 或 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: 15px;
        border-bottom-left-radius: 15px;
    }
    form input[type="submit"] {
        background:#000;
        border:1px solid #000;
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
        outline:none;
    }
<form method="get" action="">
	<input name="s" type="text" placeholder="Search">
	<input type="submit" value="">
</form>

于 2019-11-21T18:24:49.527 回答
1

如果您希望非方形元素具有圆角，则不应使用百分比。使用绝对单位，例如pxorem代替：

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: 15px;
    border-bottom-left-radius: 15px;
}

form input[type="submit"] {
    background:#000;
    border:1px solid #000;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    outline:none;
}
<form method="get" action="">
	<input name="s" type="text" placeholder="Search">
	<input type="submit" value="">
</form>

于 2019-11-21T18:17:27.003 回答