I've crafted an exquisite search box for my website, but I'm struggling to make it functional and display search results. Below are the Html and CSS files pertaining to this section of my site:
.searchbox{
/*setting width of the form element*/
width:350px;
/*centering the form element*/
margin-top: 200px;
margin-left: 250px;
margin-bottom: 370px;
}
input[type="search"]{
padding:10px 15px 10px 50px;
font-size:36px;
color:#4D4D4D;
/*removing border from search box*/
border:none;
/*using a search symbol as background image*/
background-image:url(img/search-btn.png);
background-repeat:no-repeat;
/*adjusting background size*/
-webkit-background-size:35px 35px;
-moz-background-size:35px 35px;
-o-background-size:35px 35px;
background-size:35px 35px;
/*positioning background image*/
background-position:8px 12px;
/*changing background color to white*/
background-color:#C6E2FF;
}
/*modifying placeholder text color and ensuring cross-browser consistency*/
input[type="search"]::-webkit-input-placeholder{
color:#0276FD;
}
input[type="search"]:-moz-placeholder { /* Firefox 18- */
color: #0276FD;
}
input[type="search"]::-moz-placeholder { /* Firefox 19+ */
color: #0276FD;
}
input[type="search"]:-ms-input-placeholder { /* internet explorer*/
color: #0276FD;
}
form.searchbox a{
display:block;
/*removing underlines from anchor element*/
text-decoration:none;
color:#1f5350;
font-size:30px;
background-color:#C6E2FF;
padding:10px;
}
form.searchbox ul{
width:465px;
/*removing predefined bullet points from list*/
list-style:none;
/*removing padding from list items*/
padding:0;
}
form.searchbox ul li{
margin-bottom:10px;
}
/*adding hover effect to list item when hovered over with mouse*/
.searchbox ul li a:hover{
color:#395D33;
background:#8CDD81;
}
/*slight movement to the right on hover*/
.searchbox ul li:hover{
/*transform*/
-webkit-transform:translateX(20px);
-moz-transform:translateX(20px);
-ms-transform:translateX(20px);
-o-transform:translateX(20px);
transform:translateX(20px);
}
/*initially hiding suggestion list*/
.suggestions li{
overflow:hidden;
height:0;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
/*showing suggestions when search field is focused*/
input[type="search"]:focus + .suggestions li{
height:63px;
}<section class="searcharea">
<div class="wrapper">
<form class="searchbox" action="Resources.html" target="_NEW">
<input type="search" placeholder="search.." />
<ul class="suggestions">
<li><a href="What is palliative care.html">What is palliative ca...</a></li>
<li><a href="Who needs palliative care.html">Who needs palliative ca...</a></li>
<li><a href="Talking about palliative care.html">Talking about palliative ca...</a></li>
<li><a href="How to interact with providers.html">how to interact with providers...</a></li>
<li><a href="Resources">Resourc...</a></li>
</ul>
</form>
</div>
</section>I'm seeking assistance with making the search bar function without having to delve into PHP or database creation; any help would be greatly appreciated.