Professional Textarea - 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>Professional TextArea</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet"> <style> body { font-family: 'Poppins', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background: #f0f2f5; margin: 0; } .textarea-container { position: relative; width: 400px; max-width: 90%; } .textarea-container label { display: block; font-weight: 600; margin-bottom: 10px; } .custom-textarea { width: 100%; padding: 15px 50px 15px 15px; border: 2px solid #0084ff; border-radius: 10px; font-size: 1rem; resize: none; outline: none; transition: border-color 0.3s, box-shadow 0.3s; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); position: relative; background-color: #fff; } .custom-textarea:focus { border-color: #005bb5; box-shadow: 0 0 10px rgba(0, 132, 255, 0.5); } .emoji-icon, .clear-icon { position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; } .emoji-icon { right: 15px; font-size: 1.5rem; } .clear-icon { right: 45px; font-size: 1.5rem; } .emoji-picker { display: none; position: absolute; bottom: 50px; right: 15px; background: white; border: 1px solid #ddd; border-radius: 10px; padding: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .emoji-picker span { font-size: 1.5rem; margin: 5px; cursor: pointer; } .emoji-picker span:hover { transform: scale(1.2); } .clear-icon:hover { transform: scale(1.2); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn 0.3s; } </style> </head> <body> <div class="textarea-container"> <label for="customTextarea">Your Message</label> <textarea id="customTextarea" class="custom-textarea" rows="5" placeholder="Type your message..."></textarea> <div class="clear-icon">❌</div> <div class="emoji-icon">😊</div> <div class="emoji-picker fade-in"> <span>😊</span> <span>😂</span> <span>😍</span> <span>😢</span> <span>😎</span> <span>😡</span> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const textarea = document.getElementById('customTextarea'); const emojiIcon = document.querySelector('.emoji-icon'); const clearIcon = document.querySelector('.clear-icon'); const emojiPicker = document.querySelector('.emoji-picker'); emojiIcon.addEventListener('click', () => { emojiPicker.style.display = emojiPicker.style.display === 'block' ? 'none' : 'block'; }); emojiPicker.addEventListener('click', (e) => { if (e.target.tagName === 'SPAN') { textarea.value += e.target.textContent; emojiPicker.style.display = 'none'; } }); clearIcon.addEventListener('click', () => { textarea.value = ''; }); document.addEventListener('click', (e) => { if (!emojiPicker.contains(e.target) && e.target !== emojiIcon) { emojiPicker.style.display = 'none'; } }); }); </script> </body> </html>