<!-- CSS -->
<style type='text/css'>
 
#tipoEventos {
    border: inset;
    border-color: orange; 
    opacity: 0.8; 
    font-family: sgoe script; 
    font-size: 14px;
}
 
    #tipoEventos option {
        font-family: sgoe script;
        color: #333;
        font-size: 1.5em;
    }
 
    #otroTipoEventos {
        display: none;
        border: inset;
        border-color: orange; 
        opacity: 0.8; 
        font-family:segoe script; 
        font-size: 14px;
    }
 
</style>
 
<!-- HTML -->
<select name="tipoEventos" id="tipoEventos">
 
    <option value="null" selected disabled>---Eligir tipo de evento---</option>
    <option value="deberes">Deberes</option>
    <option value="trabajos">Trabajos</option>
    <option value="salidas">Salidas</option>
    <option value="vacaciones">Vacaciones</option>
    <option value="otro">Otro...</option>
 
</select>
 
<input type="text" name="otroTipoEventos" id="otroTipoEventos" disabled>
 
 
<!-- Codigo javascript -->
<script type='text/javascript'>
    document.getElementById('tipoEventos').addEventListener('change', function(){
        var valor = this.value;
 
        // Si el valor elegido del select == otro, habilitar la caja de texto.
        if(valor === 'otro'){
            var cajaTexto = document.getElementById('otroTipoEventos');
            cajaTexto.disabled = false;
            cajaTexto.style.display = 'inherit';
 
        } 
    });
</script>