Custom Select in an EASY Way (HTML, CSS, and JS)

[@rodrigotavares6421]

Parabéns pela inclusão das legendas! Como surdo, me sinto parte da comunidade assistindo suas aulas. Obrigado por isso!

[@niltonjr21]

Não tem como! Por mais simples que seja, cada aula uma novidade e um aprendizado diferente. Maykão brabo demais.

[@maykbrito]

Que massa que curtiu Nilton!! TMJ

[@cssgabriel]

É impressionante o quanto dá pra aprender com componentes tão "simples".. fantástico Maycao... vc manda bem demais!!

[@viniciusrubia3656]

Tu é o cara Mayk!!! Conteúdo bom demais 💥

[@maykbrito]

Valeu mano!! Que bom que tá curtindo!

[@guilhermealves826]

Excelente conteúdo, obrigado Maykão. Me ajudou demais esse vídeo.

[@principe.borodin]

esse cara come css no cafe da manha, almoco e jantar...ele eh um monstro.

[@diegoferreira3145]

Muito bom! Parabéns pelo conteúdo e didática

[@maikemanoel597]

Maykão torna tudo muito simples, cara! Que aula incrível

[@eni_training]

Muito legal... curti muito... me ajudando no meus estudos

[@maykbrito]

Que massa!! Bora estudar!!

[@arthur.fer_dev]

Parabéns pelo vídeo!! 🤙 DICA: Acho interessante vocês colocarem no final um take da página funcionando com um screen reader, como o NVDA.

[@fulviocezarcanduccidias]

Parabéns e que você coloque mais contéudos assim dinâmicos ... Deus abençoe

[@maykbrito]

Obrigado pelo seu comentário e carinho Fulvio!

[@angelosilvanno]

muito bom esse #boraCodar me ajuda nos meus estudos!

[@kelvinymickael5855]

Muto show!! Ajudou dms...

[@alaelciolucas174]

Não vai tem mais vídeos do boracodar no KZbin?

[@Dani-lw2bs]

Faz um vídeo desenvolvendo em Expo um sistema de chamada por áudio e vídeo. Por favor senhores 🙏

[@alexsepph]

Q navegadfor é esse em 2:40 ? Achei legal as abas na lateral

[@rocketseat]

é o navegador Arc

[@rafael37663]

Parabéns pelo conteudo Maykão show, so me tira uma duvida, como eu faria para fechar o select quando clickar fora da caixa.

[@maykbrito]

Dá pra usar a estratégia que fizemos do keydown, mas para o mousedown ou click na window.

[@rafael37663]

@@maykbrito boooua, vou tenta aqui abraços

[@maykbrito]

@@rafael37663 shooww!! sucesso!

[@0kira]

vcs poderiam trazer um select que de para selecionar varios items, preciso de um desses e ta complicado fazer aqui kkk

[@americomanuel9834]

comprando os cursos da rocketseat posso fazer download de videos?

[@mel0nchi]

Boa tarde Mayk! Qual o padrão/metodologia de css que tu usa?

[@mel0nchi]

Tenho outra pergunta, você acha viável usar esse select em um projeto escalável ou vai dar ruim?

[@maykbrito]

Acho que nenhum. Se tem nome a maneira que eu faço, eu não sei kkkk..

[@maykbrito]

@@mel0nchiolha, se vc estiver usando alguma biblioteca ou framework, primeiro pesquisa se não tem algo no padrão deles. Caso não tenha, esse é um ótimo ponto de partida pra você levar adiante

[@mel0nchi]

@@maykbrito lol depois da uma olha no método BEM (block element modifier), acho que é o mais usado pela estrutura ficar bem simples pra manutenção.

[@maykbrito]

​@@mel0nchieu tava até escrevendo que eu já usei o BEM , mas acabei perdendo o costume de usar e abandonei. Mas sim, concordo muito contigo, é um ótimo método e bem organizado para utilizar o CSS em grande escala

[@ptpedropt]

Queria ver a resolução de todo o projecto do boraCodar da ultima semana.😉 Eu fiz o desafio usando a biblioteca shadcn-ui e tailwind para poupar tempo.

[@maykbrito]

OOOLOOOOOCCOOOOOO!!! Deve ter ficado MUITO DELICINNHAAA!! Shad-cn tá lindo demais!!

[@Jardinets]

Hellllp! Essa tela preta onde abre. Eu queria fazer o exercício junto com ele. Mas não sei o que abrir. E outra ele começa o vídeo com o código pronto. No App já tá pronto. Sou Analista de Sistemas formada em 1900 e nem lembro mais. Tô perdida aqui rs

[@maxwellalvesdesousa5153]

Uma dúvida, e se eu clica-se fora? Em qualquer outra área? Que tipo de evento seria? Por que um "Select" normal do html já tem isso por padrão.

[@maykbrito]

pode usar o windo.addEventListener('click', e => { // código para fechar aqui })

[@Leandro-4687]

Único problema é que :has() não tem compatibilidade com o Firefox... Acho valido avisar isso no vídeo pois por mais elegante que fique usar essa solução na prática vai levar alguma tempo até que se tenha compatibilidade com todos os navegadores e trazer um conteúdo assim pode induzir uma pessoa nova a usar e ela nem saber por que em alguns navegadores não funcionam.

[@maykbrito]

Bora se atualizar Firefox.. ajuda nóis!

[@R6videos6R]

Dá pra habilitar.

[@jg-wd]

​@@R6videos6R mas isso é chato e duvido que um usuário comum faça ou se importe de fazer isso. Essa feature é de 2021, e ainda não é padrão no Firefox, que tá passando vergonha. Gosto do seletor :has(), mas evito usar por causa do Firefox infelizmente.

[@rosieledavid8787]

Que navegador é este? Maykão manda muito bem

[@rocketseat]

É o Arc

[@rosieledavid8787]

@@rocketseat obrigada

[@ppedrolucas_]

É a resolução completa mesmo?

[@maykbrito]

Do select, sim, do desafio inteiro, não

[@ppedrolucas_]

@@maykbrito aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa agr entendi

[@maykbrito]

@@ppedrolucas_ kkkkkk

[@QueirozDB17]

Jovem, gostaria de agradecer pelo conteudo excelente, me ajudou muito, mas eu to com um probleminha, na pagina onde eu inserir o código, quando a caixa expande, ela empurra o conteúdo que está acima para um pouco mais para cima, e quando recolhe o conteudo abaixa, existe uma forma de quando a caixa de seleção expandir o posicionamento dela ficar fixo?

[@danielbrasc]

verificou se tem algum espaçamento sendo adicionado no css quando a caixa expande/recolhe?

[@alexandrecruv]

Eu coloquei as linhas do lucid para aparecer os ícones das setas up down e não apareceram no meu projeto e revisei diversas vezes e não sei porque não aparece😥

[@rocketseat]

verifica se vc: 1. adicionou o 2:18 2. adicionou o html (entendi que sim, vc fez até essa etapa) 2:25 3. iniciou o lucide.createIcons() lá na aba JS 2:30

[@lucas_silva18]

estou enfrentando o mesmo erro, verifiquei o codigo e não esta faltando nada, no fronteditor funciona, porem quando coloco no vscode não @@rocketseat

[@alexandrecruv]

sim, tudo igualzinho ao vídeo, as setas não aparecem, estou usando o vscode@@rocketseat

[@R6videos6R]

Maykão, quando a gente deixa de usar o html select não perdemos acessibilidade?

[@maykbrito]

Depende de como estamos codando o select customizado. Existem mais comportamentos e atributos que podemos usar e deixar ainda mais acessível, como por exemplo o atributo aria-* que oferece um conjunto de comportamentos de acessibilidade, ou mais detalhes de implementação em JS, como um click fora do componente que faz o componente fechar, etc

[@LordGhapa]

firefox vai sofrer com esse tanto de has

[@maykbrito]

Firefox foi tão significativo na minha carreira, com o firebug.. mas acho estranha batalha entre os navegadores para acompanhar a evolução da tecnologia.. tem coisas que funcionam lá e não cá ... é meio maluco, né? Dizem por aí que até o Safari se tornou o novo Internet Explorer hehehe

[@LordGhapa]

@@maykbrito eu nesses dias tava estudando como fazer input de pesquisa fiz legalzinho no chrome chego no firefox o input search não cria botão de limpeza de campo , lá vai eu tendo que tirar o automático e fazer um em css ,

[@gamerfas]

@@maykbrito Mas o que deve ser feito nesses casos? Ignora a existência do firefox? ou tenta outra abordagem?

[@maykbrito]

​@@gamerfasTentar outras abordagens, pois precisamos pensar nos usuários...

[@jg-wd]

@@maykbrito um cara no canal do Theo t3 comentou que muitas pessoas do core do Firefox foram dispensadas na onda de layoffs e que boa parte dessa gente trabalhava na implementação do CSS no navegador.

[@ati_modis]

não sei se é vergonhoso pedir isso kkkk, mas alguém tem o projeto pronto? tipo no Fiddle ou Codepen etc?

[@Judenilson]

Cadê o desafio 35 pessoal? Não vão mais disponibilizar para os meros pobres mortais? hehe

[@rocketseat]

Os desafios estão dentro da plataforma boracodar.dev 💜

[@patrickxfranco]

sabia não que era tão complexo fazer um select customizado

[@rocketseat]

Sempre uma dorzinha de cabeça fazer um select customizado 🥹😅

[@ati_modis]

se tu for pensar na verdade é beeem complexo. é que o Mayk faz parecer simples =D

[@patrickxfranco]

kkkkkk pois eu não achei que parece simples, na realidade, eu disse que é bem complexo aparentemente@@ati_modis

[@ati_modis]

@@patrickxfranco kkkk é verdade, li errado :D

[@murilocaires261]

O que aconteceu com o bora codar da semana passada?

[@rocketseat]

Os desafios estão dentro da plataforma boracodar.dev 💜