Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Como Ocultar una “option” de un “select” con CSS

En ocasiones en nuestros proyectos usamos elementos de tipo <select></select> y dentro de estos elementos agregamos varias opciones o elementos de tipo <option></option> para brindarle al usuario la posibilidad que pueda seleccionar una opción o dato. Si por alguna razón necesitas ocultar uno de estas opciones o options, pues hacerlo con CSS es muy fácil y en este tutorial te enseñare a Como Ocultar una Option de un Select con CSS, vamos con ello.

Aplicación o software

Antes de continuar, te invito a leer los siguiente artículos:

Asimismo, te invito a escuchar el Podcast: “5 Consejos para ser un Programador más Productivo” (No son los clásicos consejos técnicos de programación, si no de rutinas y buenos hábitos cotidianos) y “Consejos Para Entrenar Tu Memoria de Programador”(Anchor Podcast)

Spotify: Sound Cloud: Apple Podcasts Anchor Podcasts

Bien ahora continuemos con el Post: Como Ocultar una “option” de un “select” con CSS.

Como Ocultar una <option> de un <select> con CSS

Para este ejemplo tenemos el siguiente código HTML de un select con sus options:


Si vamos al navegador podemos ver nuestro elemento <select></select> correctamente:

Los elementos HTML “select” permiten a los usuarios elegir opciones

Entonces si queremos ocultar la 4ta opción la cual es Torta de Naranja, aplicamos el siguiente código CSS:


En el código anterior seleccionamos el valor de la cuarta opción y le aplicaciones la propiedad display con el valor none para ocultarlo.

Y si vamos nuevamente al navegador podemos ver que la cuarta opción la cual es Torta de Naranja, ha sido ocultada:

Con CSS puedes ocultar varias opciones del select

Como puedes ver ocultar una opción del select es sencillo, el truco está en seleccionar el valor de cada opción y aplicarle la propiedad CSS mencionada.

Conclusión

En este tutorial has aprendido a Como Ocultar una <option> de un <select> con CSS, saber hacer esto te servirá para tareas similares en tus proyectos.

Nota(s)

 

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.

Salir de la versión móvil