Прозрачная рамка при вводе ⇐ Html

[Anonymous]

Мне нужна помощь, потому что я не знаю, как сделать прозрачную рамку для ввода. Что я хочу в результате:

Я попробовал все, что узнал, с рамкой и box-shadow, но до сих пор не знаю, где я напутал. Не могли бы вы мне помочь? Даже если мне нужно просмотреть статью, чтобы понять, как это сделать.

Код: Выделить всё

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

Код: Выделить всё

[/i]Rechercher

Подробнее здесь: https://stackoverflow.com/questions/699 ... r-on-input