Unique Styled Search Bar - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Unique Styled Search Bar</title> <style> body { font-family: 'Arial', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); margin: 0; } .search-container { position: relative; width: 400px; max-width: 100%; } .search-input { width: 100%; padding: 15px 50px 15px 20px; border-radius: 50px; border: none; outline: none; font-size: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .search-input:focus { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } .search-icon { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); font-size: 24px; color: #555; cursor: pointer; transition: color 0.3s ease; } .search-icon:hover { color: #000; } .search-emoji { position: absolute; top: -50px; left: 20px; font-size: 40px; animation: bounce 2s infinite; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } </style> </head> <body> <div class="search-container"> <input type="text" class="search-input" placeholder="Search..."> </div> <script> const searchInput = document.querySelector('.search-input'); const searchIcon = document.querySelector('.search-icon'); searchIcon.addEventListener('click', () => { if (searchInput.value.trim() !== '') { alert(`Searching for: ${searchInput.value}`); } }); searchInput.addEventListener('keypress', (e) => { if (e.key === 'Enter' && searchInput.value.trim() !== '') { alert(`Searching for: ${searchInput.value}`); } }); </script> </body> </html>