如何从输入中删除黑色顶部和左侧轮廓

Question

.modal{
width:50%;
margin:0 auto;
padding:9px;
background:lightseagreen;
}
input{
display:block;
outline:none;
border-radius:9px;
}

<div class='modal'>
<input type='text'>
</div>

有没有办法删除input标签的黑色轮廓顶部和左侧。
我可以通过添加边框来做到这一点：
border:1px solid lightseagreen;
但我不希望输入周围有任何边框或轮廓，通常，在整个网站上，因为背景颜色为 .modal是可变的。

Answer 1

在输入 CSS 中使用border: none

.modal{
width:50%;
margin:0 auto;
padding:9px;
background:lightseagreen;
}
input{
display:block;
outline:none;
border-radius:9px;
border: none;
}

<div class='modal'>
<input type='text'>
</div>

Answer 2

使用border: none完全删除边框。

您可以使用以下方法删除顶部和左侧：border-left: none和border-top: none.

.modal{
width:50%;
margin:0 auto;
padding:9px;
background:lightseagreen;
}
input{
display:block;
outline:none;
border-left: none;
border-top: none;
border-radius:9px;
}

<div class='modal'>
<input type='text'>
</div>