输入透明边框

Question

我正在寻求帮助，因为我不知道如何在我的输入上做这个透明边框。

.location{
    margin-left:40px;
    margin-top: 10px;
}

.location .fas{
    padding:15px 15px 10px 15px;
    background-color: red;
    background-color:#F2F2F2;
    height:20px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.location input[type=text]{
    padding:16px 11px 12px 11px;
    border:  1px solid rgba(0, 0,0,0.1);
    outline:none;
}

::placeholder{
    color:black;
    font-weight: bold;
}

.location a:visited{
    color:white;
}

.location a {
    background-color: #0065FC;
    padding:14px 15px 10px 15px;
    border-top-right-radius:10px;
    border-bottom-right-radius: 10px;
    display: inline-block;
    height:21px;
}

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"  crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="location">

            <i class="fas fa-map-marker-alt"></i><input type="text" placeholder="Marseille, France"><a href="#">Rechercher</a>

        </div>

我尝试了我在边框和框阴影方面学到的所有知识，但我仍然不知道我在哪里搞砸了...

你能帮我吗？即使我需要看一篇文章来理解我必须这样做的方式。

我在下面放了截图和部分代码。

感谢阅读

Answer 1

至此，我几乎掌握了您屏幕截图中的内容。

.location{
    margin-left:40px;
    margin-top: 10px;
    display : flex;
    align-items: center;

}

.location .fas{
    padding:15px 15px 10px 15px;
    background-color: red;
    background-color:#F2F2F2;
    height:20px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.location input[type=text]{
    padding:16px 11px 12px 11px;
    border:  1px solid #F2F2F2;
  margin:0;
    outline:none;
}

::placeholder{
    color:black;
    font-weight: bold;
}

.location a:visited{
    color:white;
}

.location a {
    background-color: #0065FC;
    padding:14px 15px 10px 15px;
    border-top-right-radius:10px;
    border-bottom-right-radius: 10px;
    display: inline-block;
    height:21px;
    color : white;
    text-decoration: none;
}

输入透明边框

Transparent border on input

html

css

input

border

transparent