diff --git a/CUSTOM_SELECT_GUIDE.md b/CUSTOM_SELECT_GUIDE.md
new file mode 100644
index 0000000..b8d7586
--- /dev/null
+++ b/CUSTOM_SELECT_GUIDE.md
@@ -0,0 +1,154 @@
+# 🎨 Guia de Personalização de Select/Option - Estilo Caixa
+
+Este guia demonstra como personalizar elementos `<select>` nativos dos navegadores para ter aparência de "caixa" ao invés da lista cascata padrão.
+
+## 📋 Problema
+
+Por padrão, elementos `<select>` dos navegadores exibem uma lista dropdown (cascata) quando clicados. Muitas vezes queremos uma aparência mais personalizada, como uma caixa estilizada.
+
+## ✅ Solução
+
+### 1. Método Principal: CSS `appearance: none`
+
+A técnica principal consiste em remover a aparência nativa e aplicar estilos personalizados:
+
+```css
+.custom-select {
+    /* Remove a aparência padrão do browser */
+    appearance: none;
+    -webkit-appearance: none;  /* Safari/Chrome */
+    -moz-appearance: none;     /* Firefox */
+    
+    /* Aplicar estilos personalizados */
+    border: 3px solid #667eea;
+    border-radius: 15px;
+    padding: 15px 50px 15px 20px;
+    background-color: #f8f9ff;
+    
+    /* Ícone personalizado */
+    background-image: url('data:image/svg+xml...');
+    background-position: right 15px center;
+    background-repeat: no-repeat;
+}
+```
+
+### 2. Propriedades CSS Essenciais
+
+| Propriedade | Função |
+|-------------|---------|
+| `appearance: none` | Remove aparência nativa |
+| `border` | Define bordas personalizadas |
+| `border-radius` | Cria cantos arredondados |
+| `padding` | Controla espaçamento interno |
+| `background-image` | Adiciona ícone customizado |
+| `cursor: pointer` | Indica elemento clicável |
+
+### 3. Efeitos Interativos
+
+```css
+.custom-select:hover {
+    border-color: #5a67d8;
+    background-color: #edf2ff;
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
+}
+
+.custom-select:focus {
+    outline: none;
+    border-color: #4c51bf;
+    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.3);
+}
+```
+
+## 📁 Arquivos de Demonstração
+
+### 1. `select_personalizado.html`
+- Exemplo focado na técnica principal
+- Design moderno com gradientes
+- Código CSS comentado
+- Interface responsiva
+
+### 2. `custom_select_demo.html`
+- Comparação entre diferentes abordagens
+- Select nativo vs personalizado vs botões
+- Demonstração interativa completa
+
+## 🚀 Como Usar
+
+1. **Copie o CSS personalizado** para seu projeto
+2. **Aplique a classe** `.custom-select` ao seu elemento `<select>`
+3. **Customize as cores e tamanhos** conforme sua necessidade
+4. **Teste em diferentes navegadores** para garantir compatibilidade
+
+## 💡 Dicas Importantes
+
+### ✅ Vantagens
+- Mantém funcionalidade nativa do `<select>`
+- Compatível com validação HTML5
+- Acessível com teclado
+- Funciona em dispositivos móveis
+
+### ⚠️ Limitações
+- Estilização das `<option>` é limitada
+- Alguns navegadores podem ter comportamentos diferentes
+- Requer prefixos CSS para compatibilidade total
+
+### 🎯 Alternativas
+- **Bibliotecas JS**: Select2, Chosen, React Select
+- **Botões customizados**: Para controle total da aparência
+- **Frameworks CSS**: Bootstrap, Material-UI, Tailwind
+
+## 🔧 Exemplo de Implementação
+
+```html
+<div class="form-group">
+    <label for="tecnologia">Escolha uma tecnologia:</label>
+    <select id="tecnologia" class="custom-select">
+        <option value="">-- Selecione --</option>
+        <option value="js">JavaScript</option>
+        <option value="py">Python</option>
+        <option value="java">Java</option>
+    </select>
+</div>
+```
+
+## 📱 Responsividade
+
+```css
+@media (max-width: 768px) {
+    .custom-select {
+        padding: 12px 40px 12px 16px;
+        font-size: 16px; /* Evita zoom no iOS */
+    }
+}
+```
+
+## 🎨 Variações de Design
+
+### Minimalista
+```css
+.minimal-select {
+    appearance: none;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 10px 30px 10px 10px;
+    background: white;
+}
+```
+
+### Material Design
+```css
+.material-select {
+    appearance: none;
+    border: none;
+    border-bottom: 2px solid #1976d2;
+    border-radius: 0;
+    padding: 12px 0;
+    background: transparent;
+}
+```
+
+---
+
+**Criado para o repositório `logica_algoritmo_javascript`**  
+Demonstrações práticas de personalização de elementos HTML com CSS e JavaScript.
\ No newline at end of file
diff --git a/cap02/custom_select_demo.html b/cap02/custom_select_demo.html
new file mode 100644
index 0000000..b9af858
--- /dev/null
+++ b/cap02/custom_select_demo.html
@@ -0,0 +1,257 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Select Personalizado - Demo</title>
+    <style>
+        * {
+            font-family: Arial, Helvetica, sans-serif;
+            box-sizing: border-box;
+        }
+
+        body {
+            margin: 0;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            background-color: white;
+            padding: 30px;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+
+        h1 {
+            text-align: center;
+            color: #333;
+            margin-bottom: 30px;
+            padding-bottom: 10px;
+            border-bottom: 2px solid #007bff;
+        }
+
+        .demo-section {
+            margin: 30px 0;
+            padding: 20px;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+        }
+
+        .demo-section h2 {
+            color: #555;
+            margin-top: 0;
+        }
+
+        /* Estilo para select nativo padrão */
+        .native-select {
+            width: 100%;
+            padding: 12px;
+            font-size: 16px;
+            border: 2px solid #ddd;
+            border-radius: 6px;
+            background-color: white;
+        }
+
+        /* Estilo para select personalizado como caixa */
+        .custom-select-container {
+            position: relative;
+            width: 100%;
+        }
+
+        .custom-select {
+            appearance: none;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            width: 100%;
+            padding: 15px 20px;
+            font-size: 16px;
+            border: 2px solid #007bff;
+            border-radius: 10px;
+            background-color: #f8f9fa;
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8"><path fill="%23007bff" d="M0 0l6 6 6-6z"/></svg>');
+            background-repeat: no-repeat;
+            background-position: right 15px center;
+            background-size: 12px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .custom-select:hover {
+            border-color: #0056b3;
+            background-color: #e9ecef;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0,123,255,0.3);
+        }
+
+        .custom-select:focus {
+            outline: none;
+            border-color: #0056b3;
+            box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
+        }
+
+        /* Estilo alternativo - select como botões em caixa */
+        .button-select-container {
+            border: 2px solid #28a745;
+            border-radius: 10px;
+            padding: 15px;
+            background-color: #f8fff9;
+        }
+
+        .button-select-label {
+            font-weight: bold;
+            color: #155724;
+            margin-bottom: 10px;
+            display: block;
+        }
+
+        .button-options {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 10px;
+        }
+
+        .option-button {
+            padding: 12px 16px;
+            border: 2px solid #28a745;
+            border-radius: 6px;
+            background-color: white;
+            color: #28a745;
+            cursor: pointer;
+            text-align: center;
+            transition: all 0.2s ease;
+            font-size: 14px;
+        }
+
+        .option-button:hover {
+            background-color: #28a745;
+            color: white;
+            transform: scale(1.05);
+        }
+
+        .option-button.selected {
+            background-color: #28a745;
+            color: white;
+            font-weight: bold;
+        }
+
+        .result {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #e7f3ff;
+            border-left: 4px solid #007bff;
+            border-radius: 4px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Personalização de Select/Option - Demonstração</h1>
+        
+        <div class="demo-section">
+            <h2>1. Select Nativo Padrão (Dropdown Cascata)</h2>
+            <label for="native-select">Escolha uma opção:</label>
+            <select id="native-select" class="native-select">
+                <option value="">Selecione uma opção...</option>
+                <option value="opcao1">Opção 1 - JavaScript</option>
+                <option value="opcao2">Opção 2 - HTML</option>
+                <option value="opcao3">Opção 3 - CSS</option>
+                <option value="opcao4">Opção 4 - React</option>
+                <option value="opcao5">Opção 5 - Node.js</option>
+            </select>
+        </div>
+
+        <div class="demo-section">
+            <h2>2. Select Personalizado (Estilo Caixa)</h2>
+            <label for="custom-select">Escolha uma tecnologia:</label>
+            <div class="custom-select-container">
+                <select id="custom-select" class="custom-select">
+                    <option value="">Selecione uma tecnologia...</option>
+                    <option value="javascript">JavaScript - Linguagem de programação</option>
+                    <option value="html">HTML - Linguagem de marcação</option>
+                    <option value="css">CSS - Folhas de estilo</option>
+                    <option value="react">React - Biblioteca JavaScript</option>
+                    <option value="nodejs">Node.js - Runtime JavaScript</option>
+                </select>
+            </div>
+        </div>
+
+        <div class="demo-section">
+            <h2>3. Alternativa com Botões (Estilo Caixa de Opções)</h2>
+            <div class="button-select-container">
+                <label class="button-select-label">Escolha seu nível de experiência:</label>
+                <div class="button-options">
+                    <button type="button" class="option-button" data-value="iniciante">Iniciante</button>
+                    <button type="button" class="option-button" data-value="intermediario">Intermediário</button>
+                    <button type="button" class="option-button" data-value="avancado">Avançado</button>
+                    <button type="button" class="option-button" data-value="expert">Expert</button>
+                </div>
+            </div>
+        </div>
+
+        <div class="result" id="result">
+            <strong>Resultado:</strong> Nenhuma seleção feita ainda.
+        </div>
+    </div>
+
+    <script>
+        // Elementos do DOM
+        const nativeSelect = document.getElementById('native-select');
+        const customSelect = document.getElementById('custom-select');
+        const buttonOptions = document.querySelectorAll('.option-button');
+        const resultDiv = document.getElementById('result');
+
+        // Função para atualizar o resultado
+        function updateResult(type, value) {
+            const messages = {
+                'native': `Select Nativo: "${value}" selecionado`,
+                'custom': `Select Personalizado: "${value}" selecionado`,
+                'button': `Botões: "${value}" selecionado`
+            };
+            
+            resultDiv.innerHTML = `<strong>Resultado:</strong> ${messages[type]}`;
+        }
+
+        // Event listeners para select nativo
+        nativeSelect.addEventListener('change', function() {
+            if (this.value) {
+                updateResult('native', this.options[this.selectedIndex].text);
+            }
+        });
+
+        // Event listeners para select personalizado
+        customSelect.addEventListener('change', function() {
+            if (this.value) {
+                updateResult('custom', this.options[this.selectedIndex].text);
+            }
+        });
+
+        // Event listeners para botões
+        buttonOptions.forEach(button => {
+            button.addEventListener('click', function() {
+                // Remove seleção anterior
+                buttonOptions.forEach(btn => btn.classList.remove('selected'));
+                
+                // Adiciona seleção atual
+                this.classList.add('selected');
+                
+                // Atualiza resultado
+                updateResult('button', this.textContent);
+            });
+        });
+
+        // Adiciona efeito visual ao hover nos selects
+        [nativeSelect, customSelect].forEach(select => {
+            select.addEventListener('focus', function() {
+                this.style.transform = 'scale(1.02)';
+            });
+            
+            select.addEventListener('blur', function() {
+                this.style.transform = 'scale(1)';
+            });
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/cap02/select_personalizado.html b/cap02/select_personalizado.html
new file mode 100644
index 0000000..0e948a9
--- /dev/null
+++ b/cap02/select_personalizado.html
@@ -0,0 +1,223 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Select Personalizado - Estilo Caixa</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+
+        .container {
+            background: white;
+            padding: 40px;
+            border-radius: 20px;
+            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+            max-width: 500px;
+            width: 100%;
+        }
+
+        h1 {
+            text-align: center;
+            color: #333;
+            margin-bottom: 30px;
+            font-size: 28px;
+        }
+
+        .form-group {
+            margin-bottom: 25px;
+        }
+
+        label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 600;
+            color: #555;
+            font-size: 16px;
+        }
+
+        /* TÉCNICA PRINCIPAL: Personalização do Select Nativo */
+        .custom-select {
+            /* Remove a aparência padrão do browser */
+            appearance: none;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            
+            /* Estilização customizada */
+            width: 100%;
+            padding: 15px 50px 15px 20px;
+            font-size: 16px;
+            font-weight: 500;
+            
+            /* Bordas e fundo estilo "caixa" */
+            border: 3px solid #667eea;
+            border-radius: 15px;
+            background-color: #f8f9ff;
+            
+            /* Cursor e transições */
+            cursor: pointer;
+            transition: all 0.3s ease;
+            
+            /* Ícone personalizado (seta) */
+            background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23667eea" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>');
+            background-repeat: no-repeat;
+            background-position: right 15px center;
+            background-size: 15px;
+        }
+
+        /* Efeitos de hover e focus */
+        .custom-select:hover {
+            border-color: #5a67d8;
+            background-color: #edf2ff;
+            transform: translateY(-2px);
+            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
+        }
+
+        .custom-select:focus {
+            outline: none;
+            border-color: #4c51bf;
+            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.3);
+            background-color: #edf2ff;
+        }
+
+        /* Estilização das opções (limitada no CSS) */
+        .custom-select option {
+            padding: 10px;
+            background-color: white;
+            color: #333;
+            font-size: 16px;
+        }
+
+        .custom-select option:checked {
+            background-color: #667eea;
+            color: white;
+        }
+
+        /* Resultado da seleção */
+        .result {
+            margin-top: 20px;
+            padding: 15px;
+            background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
+            border-radius: 10px;
+            text-align: center;
+            font-weight: 600;
+            color: #2d3748;
+            min-height: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        /* Código de demonstração */
+        .code-section {
+            margin-top: 30px;
+            padding: 20px;
+            background-color: #1a202c;
+            border-radius: 10px;
+            color: #e2e8f0;
+            font-family: 'Courier New', monospace;
+            font-size: 14px;
+            overflow-x: auto;
+        }
+
+        .code-section h3 {
+            color: #90cdf4;
+            margin-bottom: 15px;
+        }
+
+        .code {
+            white-space: pre-wrap;
+            line-height: 1.5;
+        }
+
+        .css-property {
+            color: #f687b3;
+        }
+
+        .css-value {
+            color: #68d391;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🎨 Select Personalizado</h1>
+        
+        <div class="form-group">
+            <label for="tecnologia">Escolha sua tecnologia favorita:</label>
+            <select id="tecnologia" class="custom-select">
+                <option value="">-- Selecione uma opção --</option>
+                <option value="javascript">🟨 JavaScript</option>
+                <option value="python">🐍 Python</option>
+                <option value="java">☕ Java</option>
+                <option value="csharp">🟣 C#</option>
+                <option value="react">⚛️ React</option>
+                <option value="vue">💚 Vue.js</option>
+                <option value="angular">🅰️ Angular</option>
+                <option value="nodejs">🟢 Node.js</option>
+            </select>
+        </div>
+
+        <div class="result" id="resultado">
+            Selecione uma tecnologia para ver o resultado aqui
+        </div>
+
+        <div class="code-section">
+            <h3>💡 Principais propriedades CSS utilizadas:</h3>
+            <div class="code">
+<span class="css-property">appearance</span>: <span class="css-value">none</span>; <em>/* Remove aparência nativa */</em>
+<span class="css-property">-webkit-appearance</span>: <span class="css-value">none</span>; <em>/* Safari/Chrome */</em>
+<span class="css-property">-moz-appearance</span>: <span class="css-value">none</span>; <em>/* Firefox */</em>
+
+<span class="css-property">border</span>: <span class="css-value">3px solid #667eea</span>; <em>/* Borda personalizada */</em>
+<span class="css-property">border-radius</span>: <span class="css-value">15px</span>; <em>/* Cantos arredondados */</em>
+<span class="css-property">padding</span>: <span class="css-value">15px 50px 15px 20px</span>; <em>/* Espaçamento interno */</em>
+
+<span class="css-property">background-image</span>: <span class="css-value">url('data:image/svg+xml...')</span>; <em>/* Ícone customizado */</em>
+<span class="css-property">background-position</span>: <span class="css-value">right 15px center</span>; <em>/* Posição do ícone */</em>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const select = document.getElementById('tecnologia');
+        const resultado = document.getElementById('resultado');
+
+        select.addEventListener('change', function() {
+            if (this.value) {
+                const textoSelecionado = this.options[this.selectedIndex].text;
+                resultado.innerHTML = `
+                    <strong>✅ Selecionado:</strong> ${textoSelecionado}<br>
+                    <small>Valor: "${this.value}"</small>
+                `;
+                resultado.style.background = 'linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)';
+            } else {
+                resultado.innerHTML = 'Selecione uma tecnologia para ver o resultado aqui';
+                resultado.style.background = 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)';
+            }
+        });
+
+        // Efeito visual adicional
+        select.addEventListener('mouseenter', function() {
+            this.style.transform = 'scale(1.02)';
+        });
+
+        select.addEventListener('mouseleave', function() {
+            this.style.transform = 'scale(1)';
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file