I want to create a search form similar to TripAdvisor's design, but I am facing some issues. The first photo shows my search bar with the class name "asdf" for testing purposes. https://i.sstatic.net/832sr.jpg
In the second picture, we encounter an issue where the expandable part of the form is wider than the input search field. https://i.sstatic.net/8qbuU.png
The third image depicts another issue when trying to assign the same width to the input["text"] field in the search form as the rest of the form.
https://i.sstatic.net/WjHoe.png
Below is my basic HTML and CSS code:
HTML
<div class="aboutUs">
<div class="textFlexContainer">>
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">City</span>
<span class="heading-primary-sub">is where summer happens</span>
</h1>
<form class="search-box" action="/search">
<input class="asdf" type="search" placeholder="Explore City">
<div class="search-page">
<h3>Explore City</h3>
<ul class="search-menu-list">
<li><a href="#">Our Daily Suggestions</a></li>
<li><a href="#">Shopping</a></li>
<li><a href="#">City Tours</a></li>
<li><a href="#">Restaurants</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Things to do</a></li>
</ul>
<h3>Recently Reviewed</h3>
</div>
</form>
</div>
</div>
</div>
CSS
.search-box{
display: block;
position: relative;
overflow: hidden;
z-index:15;
padding:2rem;
}
.asdf {
width: 80%;
padding:2rem;
border: none;
outline: none;
border-bottom:2px solid white;
margin-top:2.5rem;
font-size: inherit;
background-color: green;
color: #fff;
}
h3{
color:#fff;
margin-top:2rem;
}
.search-page {
height: fit-content;
background-color:green;
text-align: center;
padding:4rem 0;
transition: all 300ms ease-in-out;
display: none;
}
.search-page.visible {
display: block;
transition: all 300ms ease-in-out;
}
.search-page .search-menu-list{
display:flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.search-page .search-menu-list li{
list-style: none;
}
.search-page .search-menu-list li a:hover{
transform: translateY(-1rem);
}
.search-page .search-menu-list li a{
display: inline-block;
color:#fff;
padding:5px;
list-style: none;
text-decoration: none;
margin-right: 2.5rem;
transition: all 300ms ease-in-out;
border: solid 2px white;
border-radius: 1rem;
padding: 11px 13px 11px 14px;
margin: 10px;
}
.aboutUs{
display: grid;
background-image: linear-gradient(to right bottom, rgba(53, 170, 120, 0.8), rgba(20, 139, 102, 0.8)) ,url(../img/ch4.jpg);
background-size: cover;
background-position: center;
grid-column-start: 1;
grid-column-end: 13;
grid-row-start: 2;
grid-row-end: 3;
}
.textFlexContainer{
display:flex;
align-self: center;
}
.heading-primary {
color:#fff;
text-transform: uppercase;
}
.heading-primary-main{
display: block;
font-size: 6rem;
font-weight: 400;
letter-spacing: 3.5rem;
}
.heading-primary-sub {
display: block;
font-size: 2rem;
font-weight: 400;
letter-spacing: 1.8rem;
}
.text-box {
display: inline-block;
text-align: center;
margin: auto;
}
Additionally, I would like the letters above the search bar to not get squeezed at the top when clicking on the search bar field and expanding the form.