mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
90 lines
No EOL
2 KiB
HTML
90 lines
No EOL
2 KiB
HTML
<div class="search-bar-container">
|
|
<div class="search-bar">
|
|
<span class="search-icon">
|
|
<svg
|
|
height="20"
|
|
width="20"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M21.53,20.47l-5-5a8,8,0,1,0-1.06,1.06l5,5a.75.75,0,0,0,1.06-1.06ZM4,10A6,6,0,1,1,10,16,6,6,0,0,1,4,10Z"
|
|
fill="currentColor"
|
|
></path>
|
|
</svg>
|
|
</span>
|
|
<input placeholder="Search..." type="text" />
|
|
<button class="filter-button" type="button">
|
|
<svg
|
|
height="20"
|
|
width="20"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M3,5V7H4L10,13.92V19A1,1,0,0,0,11,20h2a1,1,0,0,0,1-1V13.92L20,7h1V5ZM12,17H12V13a1,1,0,0,0-.29-.71L6.41,7h11.18l-5.29,5.29A1,1,0,0,0,12,13Z"
|
|
fill="currentColor"
|
|
></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by AmruthLP12 - Tags: icon, purple, black, input, dark, theme, html, css */
|
|
.search-bar-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.search-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
background: linear-gradient(
|
|
135deg,
|
|
#333,
|
|
#111
|
|
); /* Dark gradient background */
|
|
border-radius: 50px;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 20px #8839ff; /* Glowing effect */
|
|
padding: 10px 15px;
|
|
}
|
|
|
|
.search-icon {
|
|
color: #fff; /* White color for the search icon */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.search-bar input {
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
padding: 5px 10px;
|
|
flex: 1;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.search-bar input::placeholder {
|
|
color: #bbb; /* Lighter placeholder text color */
|
|
}
|
|
|
|
.filter-button {
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
padding: 0 10px;
|
|
cursor: pointer;
|
|
color: #fff; /* White color for the filter icon */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
</style>
|
|
|