Transparenter Rand bei der Eingabe ⇐ HTML

[Anonymous]

Ich suche Hilfe, weil ich nicht weiß, wie ich diesen transparenten Rahmen für meine Eingabe erstellen soll. Was ich als Ergebnis möchte:

Ich habe alles versucht, was ich gelernt habe, mit border und box-shadow, aber ich weiß immer noch nicht, was ich falsch mache. Könnten Sie mir helfen? Auch wenn ich mir einen Artikel ansehen muss, um zu verstehen, wie es geht.

Code: Select all

.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;
}

Code: Select all

[/i]Rechercher