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

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>