{"id":124664,"date":"2022-11-16T17:37:54","date_gmt":"2022-11-16T16:37:54","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/how-to-create-a-custom-select-list\/"},"modified":"2025-02-03T16:44:44","modified_gmt":"2025-02-03T15:44:44","slug":"how-to-create-a-custom-select-list","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/como-disenar-componente-seleccion-de-datos","title":{"rendered":"C\u00f3mo dise\u00f1ar un Select basado en datos"},"content":{"rendered":"<p><span data-preserver-spaces=\"true\">Aqu\u00ed aprender\u00e1s a dise\u00f1ar un componente Select basado en datos.<\/span><\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.justinmind.com\/usernote\/tests\/23518471\/73112233\/73408287\/index.html\" width=\"820px\" height=\"370px\" frameborder=\"0\"><\/iframe><\/p>\n<p><span data-preserver-spaces=\"true\">As\u00ed es como se construye:<\/span><\/p>\n<h3><strong><span data-preserver-spaces=\"true\">Ver<\/span><\/strong><\/h3>\n<ul>\n<li>Coloca un \u00abCampo de texto de entrada\u00bb en el lienzo, haz doble clic sobre \u00e9l y escribe \u00abEntrada\u00bb. Ve a la paleta Propiedades y en la opci\u00f3n \u00abEditable\u00bb, selecciona \u00abNo\u00bb en el desplegable. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-1.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/li>\n<\/ul>\n<ul>\n<li>Desde la biblioteca \u00abComponentes web\u00bb, arrastra el icono \u00abChevron hacia abajo\u00bb y col\u00f3calo encima del \u00abCampo de texto de entrada\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-2.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/li>\n<\/ul>\n<ul>\n<li>Debajo del \u00abCampo de texto de entrada\u00bb coloca un \u00abRect\u00e1ngulo\u00bb que ser\u00e1 el fondo de las opciones desplegables. Encima, coloca cuatro rect\u00e1ngulos m\u00e1s, y al\u00ednealos, uno para cada opci\u00f3n. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-3.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/li>\n<\/ul>\n<ul>\n<li>En la paleta Propiedades desactiva el color de fondo de los cuatro rect\u00e1ngulos, y deja activo s\u00f3lo el borde \u00abInferior\u00bb en los tres primeros. Para el cuarto rect\u00e1ngulo, desactiva los bordes de todos los lados. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-4.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/li>\n<\/ul>\n<ul>\n<li>Haz doble clic en cada rect\u00e1ngulo y escribe \u00abElemento 1\u00bb, \u00abElemento 2\u00bb, \u00abElemento 3\u00bb y \u00abElemento 4\u00bb. Ve a la paleta Propiedades, dale al texto la alineaci\u00f3n izquierda y edita el relleno izquierdo. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-5.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/li>\n<\/ul>\n<ul>\n<li>Selecciona el \u00abCampo de texto de entrada\u00bb, ve a la paleta Propiedades y edita el color del \u00abBorde\u00bb y la \u00abRedondez\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-6.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/li>\n<\/ul>\n<ul>\n<li>Selecciona los rect\u00e1ngulos en las opciones desplegables, ve a la paleta Propiedades y edita el color del borde.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-7.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/li>\n<\/ul>\n<ul>\n<li>Selecciona el rect\u00e1ngulo que act\u00faa como fondo del desplegable, ve a la paleta Propiedades y edita el color del Redondeo y del Borde. A continuaci\u00f3n, ve a Efectos dentro de la misma paleta, y haz clic en \u00ab+\u00bb. Se a\u00f1adir\u00e1 una sombra desplegable por defecto. Haz clic en el icono de Configuraci\u00f3n para editar la sombra.   <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-8.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/li>\n<li>Selecciona las cuatro casillas de opciones y la casilla de fondo, haz clic con el bot\u00f3n derecho y pulsa \u00abAgrupar\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-9.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/li>\n<li>Ve a la paleta Propiedades y haz clic en el icono \u00abOcultar en simulaci\u00f3n\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-hide.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/li>\n<\/ul>\n<h3>Eventos<\/h3>\n<p>Selecciona el \u00abCampo de texto de entrada\u00bb, ve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-10.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abal hacer clic\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abMostrar elemento oculto\u00bb y selecciona el \u00abGrupo\u00bb que incluye las opciones desplegables.<\/span><\/li>\n<li>En la parte inferior, selecciona el efecto \u00abDeslizar hacia arriba\u00bb, con un tipo de suavizado \u00abOscilaci\u00f3n\u00bb y una duraci\u00f3n de 300 ms para dar al desplegable una animaci\u00f3n suave.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-11.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/li>\n<\/ol>\n<p>Con el \u00abCampo de texto de entrada\u00bb seleccionado, vuelve a la paleta Eventos, y haz clic en el \u00ab+\u00bb para a\u00f1adir un evento.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-12.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, selecciona \u00abal hacer clic\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abCambiar estilo\u00bb y elige el \u00abCampo de texto de entrada\u00bb.<\/span><\/li>\n<li>Y en el men\u00fa inferior, selecciona el color del borde y el grosor que tendr\u00e1 la entrada cuando est\u00e9 seleccionada. Para este ejemplo, elige un color azul para el borde, y un grosor de 2px. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-13.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/li>\n<\/ol>\n<p>Con el \u00abCampo de texto de entrada\u00bb seleccionado, vuelve a la paleta Eventos y haz clic en \u00ab+\u00bb para a\u00f1adir un evento.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-14.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abal hacer clic\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abGirar\u00bb y elige el icono \u00abChevron hacia abajo\u00bb.<\/span><\/li>\n<li>En la parte inferior, edita el \u00c1ngulo para que gire 180\u00ba, y selecciona un tipo de Easing \u00abSwing\u00bb, con una Velocidad de 300ms para dar al icono un efecto de animaci\u00f3n suave.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-15.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/li>\n<\/ol>\n<p>En la paleta Eventos, cambia al modo \u00abCON anterioridad\u00bb entre cada uno de los eventos, para que todos ocurran al mismo tiempo.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-16.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/p>\n<p>Selecciona el rect\u00e1ngulo con el texto \u00abElemento 1\u00bb, ve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-17.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abal hacer clic\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abEstablecer valor a un elemento\u00bb y selecciona el \u00abCampo de texto de entrada\u00bb.<\/span><\/li>\n<li>Selecciona el bot\u00f3n de opci\u00f3n \u00abCalculada\u00bb y haz clic en \u00abA\u00f1adir expresi\u00f3n\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-18.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/li>\n<\/ol>\n<p>En el Constructor de expresiones, arrastra el rect\u00e1ngulo \u00abElemento 1\u00bb hasta el primer campo, de modo que al seleccionar la primera opci\u00f3n se actualice el \u00abCampo de texto de entrada\u00bb con el texto que contiene el rect\u00e1ngulo. Haz clic en \u00abAceptar\u00bb y en \u00abAceptar\u00bb de nuevo para terminar de crear el evento.<video class=\"lazyload\" style=\"\" preload=\"\" loop=\"\" muted=\"\" width=\"\" height=\"\" data-autoplay=\"\" data-poster=\"\"><source src=\"\" type=\"\"><\/source><img decoding=\"async\" src=\"\" alt=\"\">Constructor de expresiones<\/video> <\/p>\n<p>Con el rect\u00e1ngulo \u00abElemento 1\u00bb seleccionado, vuelve a la paleta Eventos y haz clic en \u00ab+\u00bb para a\u00f1adir un evento.<\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abal hacer clic\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abOcultar elemento\u00bb y elige el \u00abGrupo\u00bb que incluye las opciones desplegables.<\/span><\/li>\n<li>En la parte inferior, selecciona el efecto \u00abDeslizar hacia arriba\u00bb, con un tipo de suavizado \u00abOscilaci\u00f3n\u00bb y una Duraci\u00f3n de 300 ms. Al hacer clic en una de las opciones, se cerrar\u00e1 el desplegable con una animaci\u00f3n suave. Haz clic en \u00abAceptar\u00bb para terminar de crear el evento.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-20.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/li>\n<\/ol>\n<p>Con el rect\u00e1ngulo \u00abElemento 1\u00bb seleccionado, vuelve a la paleta Eventos y haz clic en \u00ab+\u00bb para a\u00f1adir un evento.<\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abal hacer clic\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abGirar\u00bb y elige el icono \u00abChevron hacia abajo\u00bb.<\/span><\/li>\n<li>En la parte inferior, edita el \u00c1ngulo para que gire 0\u00ba, y selecciona un tipo de Easing \u00abSwing\u00bb, con una Velocidad de 300ms para dar al icono un efecto de animaci\u00f3n suave. Haz clic en \u00abAceptar\u00bb para terminar de crear el evento. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-21.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/li>\n<\/ol>\n<p>Con el rect\u00e1ngulo \u00abElemento 1\u00bb seleccionado, vuelve a la paleta Eventos y haz clic en \u00ab+\u00bb para a\u00f1adir un evento.<\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abal hacer clic\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00ab<span style=\"font-weight: 400;\">Cambiar estilo<\/span>\u00bb y elige el <span style=\"font-weight: 400;\">\u00abCampo de texto de entrada\u00bb.<\/span><\/span><\/li>\n<li>En la parte inferior, deja el color de borde por defecto, y el tama\u00f1o de borde por defecto (1). Haz clic en \u00abAceptar\u00bb para terminar de crear el evento. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-22.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/li>\n<\/ol>\n<p>En la paleta Eventos, cambia al modo \u00abCON anterioridad\u00bb entre cada uno de los eventos, para que todos ocurran al mismo tiempo.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-23.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/p>\n<p>En la paleta Eventos, haz clic en \u00abCopiar todos los eventos\u00bb, selecciona el rect\u00e1ngulo con el texto \u00abElemento 2\u00bb y haz clic en el bot\u00f3n \u00abPegar todos los eventos\u00bb.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-copy-paste-events.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-copy-paste-events.mp4\" type=\"video\/mp4\"><\/source><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-copy-paste-events.png\" alt=\"Copiar-pegar eventos\">Copiar-pegar eventos<\/video><\/p>\n<p>Edita el objetivo del evento \u00abEstablecer valor a un elemento\u00bb. Ve a la expresi\u00f3n del evento, y en el constructor arrastra el rect\u00e1ngulo \u00abElemento 2\u00bb al primer campo. Haz clic en \u00abAceptar\u00bb y en \u00abAceptar\u00bb de nuevo para modificar el evento. El resto de las acciones siguen siendo las mismas.   <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-select-list-25.png\" alt=\"Men\u00fa flotante\" width=\"1295\" height=\"933\"><\/p>\n<p>Repite la acci\u00f3n para cada una de las opciones desplegables restantes.<\/p>\n<p>Simula tu prototipo.<\/p>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aqu\u00ed aprender\u00e1s a dise\u00f1ar un componente Select basado en datos. As\u00ed es como se construye: Ver Coloca un \u00abCampo de texto de entrada\u00bb en el lienzo,&#8230;<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8429,8424],"tags":[],"class_list":["post-124664","post","type-post","status-publish","format-standard","hentry","category-formularios-y-datos-es","category-trucos-avanzados"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124664"}],"collection":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/comments?post=124664"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124664\/revisions"}],"predecessor-version":[{"id":126190,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124664\/revisions\/126190"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124664"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124664"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}