#html #css #input #border #transparent
Вопрос:
Я ищу помощи, потому что не знаю, как сделать эту прозрачную границу на моем входе.
.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; } lt;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" /gt; lt;div class="location"gt; lt;i class="fas fa-map-marker-alt"gt;lt;/igt;lt;input type="text" placeholder="Marseille, France"gt;lt;a href="#"gt;Rechercherlt;/agt; lt;/divgt; Я перепробовал все, чему научился с помощью border и box-shadow, но я все еще не знаю, где я путаюсь…
Не могли бы вы помочь мне с этим? Даже если мне нужно посмотреть статью, чтобы понять, как я должен это сделать.
Я поместил снимок ниже и часть кода тоже.
Спасибо за чтение
Ответ №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; } Комментарии:
1. Спасибо , сэр, все работает нормально !