Add custom select/option styling demonstration - Transform dropdown to box layout

[Copilot]

This PR addresses the question "tem como personalizar o select/option nativo dos navegadores. deixar como uma caixa ao inves de um lista em cascata?" by providing comprehensive examples and documentation for customizing native HTML select elements.

What's Added

📁 New Files

cap02/select_personalizado.html - A focused demonstration featuring:

• Modern gradient design with interactive effects
• Step-by-step CSS code explanation
• Real-time result display showing selected values
• Responsive layout with accessibility considerations

cap02/custom_select_demo.html - Complete comparison showcase including:

• Native dropdown (default browser behavior)
• CSS-customized select (box-style transformation)
• Alternative button-based selection interface
• Interactive JavaScript functionality for all approaches

CUSTOM_SELECT_GUIDE.md - Comprehensive documentation covering:

• Core CSS techniques and browser compatibility
• Implementation examples and code snippets
• Design variations (minimal, material design)
• Best practices and limitations
• Responsive design considerations

🎯 Core Solution

The implementation uses CSS appearance: none to remove native browser styling, then applies custom styling to create a box-like appearance:

.custom-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    border: 3px solid #667eea;
    border-radius: 15px;
    padding: 15px 50px 15px 20px;
    background-color: #f8f9ff;
    
    /* Custom dropdown icon */
    background-image: url('data:image/svg+xml...');
    background-position: right 15px center;
}

✨ Key Features

• Maintains native functionality: All HTML5 validation, keyboard navigation, and accessibility features preserved
• Cross-browser compatible: Includes vendor prefixes for Safari, Chrome, and Firefox
• Interactive enhancements: Hover effects, focus states, and smooth transitions
• Multiple approaches: Shows CSS-only solution plus JavaScript-enhanced alternatives
• Educational value: Clear code comments and explanations for learning purposes

🎨 Visual Impact

Transforms the standard cascading dropdown into a styled box component with:

• Custom borders and rounded corners
• Personalized colors and gradients
• Enhanced visual feedback on interaction
• Professional, modern appearance

This addition provides a practical solution to a common web development challenge while fitting perfectly with the repository's educational focus on JavaScript algorithms and web development techniques.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.