Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Display none em atributos

por peterson ricardo pereira dos santos
| 18.9k xp | 30 posts

é possível aplicar o Display:none em um atributo de uma tag sem afetar o conteúdo dentro dele ? eu consigo selecionar uma tag pelo atributo, mais não consigo afetar o atributo em si com o css. Por exemplo:

<select name="horários">
                            <optgroup label="horários">
                                <Option label="Manhã"></Option>

                                <Option label="Tarde">Tarde</Option>

                                <Option label="Noite">Noite</Option>
                            </optgroup>
                        </select>

eu consigo aplicar o display :none nesse "horário" dentro do atributo label na tag optgroup para fazer esse "horário" ter aparência e interação nula com o resto do documento HTML ?

1 resposta
solução!
por Lorena Garcia
| 8258.5k xp | 12081 posts
Alura Scuba Team Suporte Educacional

Oi Peterson, tudo bem?

Desculpe a demora em retornar.

Com CSS acredito que não irá funcionar. Mas você pode fazer com JavaScript.

Se você deseja ocultar apenas o texto dentro do atributo label da tag optgroup e manter as opções visíveis, você pode usar JavaScript para manipular o conteúdo do elemento de forma mais precisa.

Um exemplo de como você pode ocultar apenas o texto dentro do atributo label usando JavaScript:

<select name="horarios">
  <optgroup label="horários">
    <option label="Manhã"></option>
    <option label="Tarde">Tarde</option>
    <option label="Noite">Noite</option>
  </optgroup>
</select>
const optgroup = document.querySelector('select[name="horarios"] optgroup[label="horários"]');
optgroup.label = '';

Neste exemplo, usamos o método querySelector para selecionar o elemento optgroup com o atributo label específico. Em seguida, definimos o valor do atributo label como uma string vazia '', removendo assim o texto "horários" que estava sendo exibido.

Dessa forma, apenas o texto dentro do atributo label será ocultado, mantendo as opções visíveis.

Verifique se o código JavaScript é executado após o carregamento completo do DOM, usando o evento DOMContentLoaded ou colocando o script no final do arquivo HTML antes do fechamento da tag <body>.

Você pode verificar aqui o teste que fiz.

Um abraço e bons estudos.