{"id":7513,"date":"2020-01-13T11:05:22","date_gmt":"2020-01-13T11:05:22","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7513"},"modified":"2020-01-13T11:05:22","modified_gmt":"2020-01-13T11:05:22","slug":"como-cambiar-la-apariencia-de-un-selector-con-css","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/como-cambiar-la-apariencia-de-un-selector-con-css\/","title":{"rendered":"Como cambiar la apariencia de un selector con CSS"},"content":{"rendered":"<p>Darle estilos a un selector es complicado o, m\u00e1s bien extra\u00f1o, en realidad.<\/p>\n<p>En este art\u00edculo vas a averiguar como cambiar la apariencia o aspecto de un selector utilizando \u00fanicamente t\u00e9cnicas <strong>CSS<\/strong>.<\/p>\n<p>\u00bfHas probado hacerlo alguna vez?<\/p>\n<p>En realidad, la verdad es que yo no mucho tampoco. Solo los clientes exigentes se fijan en todos los detalles. Hace tiempo encontr\u00e9 una soluci\u00f3n simple (que no utiliza plugins de terceros) que permite cambiar el aspecto de los selectores y ahora he decidido compartirlo contigo.<\/p>\n<p>Cambiar la apariencia de un selector no es tan f\u00e1cil como cambiar la apariencia de otros elementos de un formulario como son los inputs, textareas, entre otros.<\/p>\n<p>Antes de nada debes quitarle la apariencia que le cada navegador con la siguiente propiedad:<\/p>\n<div id=\"wpshdo_1\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_1\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_1\"><\/a><a id=\"wpshat_1\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_1\"  onClick=\"javascript:wpsh_toggleBlock(1)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_1\" onClick=\"javascript:wpsh_code(1)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_1\" onClick=\"javascript:wpsh_print(1)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_1\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"css\" style=\"font-family:monospace;\">appearance<span class=\"sy0\">:<\/span> <span class=\"kw2\">none<\/span><span class=\"sy0\">;<\/span><\/pre><\/div><\/div>\n<p>Despu\u00e9s, ya puedes agregarle todos los estilos que desees, como por ejemplo:<\/p>\n<div id=\"wpshdo_2\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_2\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_2\"><\/a><a id=\"wpshat_2\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_2\"  onClick=\"javascript:wpsh_toggleBlock(2)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_2\" onClick=\"javascript:wpsh_code(2)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_2\" onClick=\"javascript:wpsh_print(2)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_2\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"css\" style=\"font-family:monospace;\">select <span class=\"br0\">&#123;<\/span>\n    appearance<span class=\"sy0\">:<\/span> <span class=\"kw2\">none<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">padding<\/span><span class=\"sy0\">:<\/span> <span class=\"re3\">15px<\/span> <span class=\"re3\">20px<\/span><span class=\"sy0\">;<\/span>\n    -webkit-border-radius<span class=\"sy0\">:<\/span> <span class=\"re3\">150px<\/span><span class=\"sy0\">;<\/span>\n    -moz-border-radius<span class=\"sy0\">:<\/span> <span class=\"re3\">150px<\/span><span class=\"sy0\">;<\/span>\n    border-radius<span class=\"sy0\">:<\/span> <span class=\"re3\">150px<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">border<\/span><span class=\"sy0\">:<\/span> <span class=\"re3\">1px<\/span> <span class=\"kw2\">solid<\/span> <span class=\"kw2\">green<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">background-color<\/span><span class=\"sy0\">:<\/span> <span class=\"kw2\">green<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">color<\/span><span class=\"sy0\">:<\/span> <span class=\"re0\">#ffffff<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"kw1\">font-size<\/span><span class=\"sy0\">:<\/span> <span class=\"re3\">18px<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span>\n&nbsp;\nselect<span class=\"re2\">:focus <\/span><span class=\"br0\">&#123;<\/span>\n    <span class=\"kw1\">outline<\/span><span class=\"sy0\">:<\/span> <span class=\"kw2\">none<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">&#125;<\/span><\/pre><\/div><\/div>\n<p>En este caso concreto:<\/p>\n<ul>\n<li>Quito la apariencia que le da el navegador por defecto.<\/li>\n<li>Le agrego mucho m\u00e1s padding o espacio entre el texto y el borde.<\/li>\n<li>Agrego un borde medio redoneado en color verde.<\/li>\n<li>Cambio el color de fondo a verde.<\/li>\n<li>El color del texto lo pongo en blanco.<\/li>\n<li>Y cambio el tama\u00f1o de la fuente.<\/li>\n<li>Adem\u00e1s, con la propiedad outline en focus consigo eliminar el borde azul que los navegadores ponen por defecto al pulsar o seleccionar una opci\u00f3n del selector.<\/li>\n<\/ul>\n<p>El c\u00f3digo <strong>HTML<\/strong> que debes agregar es el t\u00edpico de un selector:<\/p>\n<div id=\"wpshdo_3\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_3\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_3\"><\/a><a id=\"wpshat_3\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_3\"  onClick=\"javascript:wpsh_toggleBlock(3)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_3\" onClick=\"javascript:wpsh_code(3)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_3\" onClick=\"javascript:wpsh_print(3)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_3\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"html4strict\" style=\"font-family:monospace;\"><span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/select.html\"><span class=\"kw2\">select<\/span><\/a> <span class=\"kw3\">name<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;language&quot;<\/span>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/option.html\"><span class=\"kw2\">option<\/span><\/a> <span class=\"kw3\">value<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;es&quot;<\/span>&gt;<\/span>Espa\u00f1ol<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/option.html\"><span class=\"kw2\">option<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/option.html\"><span class=\"kw2\">option<\/span><\/a> <span class=\"kw3\">value<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;en&quot;<\/span>&gt;<\/span>Ingl\u00e9s<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/option.html\"><span class=\"kw2\">option<\/span><\/a>&gt;<\/span>\n<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/select.html\"><span class=\"kw2\">select<\/span><\/a>&gt;<\/span><\/pre><\/div><\/div>\n<p>Para conseguir como resultado algo como lo siguiente:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7514\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/01\/selector-css.png\" alt=\"Selector css\" width=\"138\" height=\"71\" \/><\/p>\n<p>De esta forma, puedes cambiar r\u00e1pidamente la apariencia o aspecto de un selector sin utilizar plugins de terceros y sin mucho esfuerzo.<\/p>\n<p>\u00bfTienes un dise\u00f1o mejor? Comparte tu c\u00f3digo con la comunidad.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tutorial y c\u00f3digo de ejemplo que te permite cambiar la apariencia o aspecto de un selector de elementos utilizando solo t\u00e9cnicas CSS.<\/p>\n","protected":false},"author":1,"featured_media":7517,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[84,62],"class_list":["post-7513","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-formularios","tag-selects"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Como cambiar la apariencia de un selector con CSS - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Tutorial y c\u00f3digo de ejemplo que te permite cambiar la apariencia o aspecto de un selector de elementos utilizando solo t\u00e9cnicas CSS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como cambiar la apariencia de un selector con CSS - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Tutorial y c\u00f3digo de ejemplo que te permite cambiar la apariencia o aspecto de un selector de elementos utilizando solo t\u00e9cnicas CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/como-cambiar-la-apariencia-de-un-selector-con-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-13T11:05:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/01\/css-for-selects.png\" \/>\n\t<meta property=\"og:image:width\" content=\"250\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-cambiar-la-apariencia-de-un-selector-con-css\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/como-cambiar-la-apariencia-de-un-selector-con-css\/\",\"name\":\"Como cambiar la apariencia de un selector con CSS - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-cambiar-la-apariencia-de-un-selector-con-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-cambiar-la-apariencia-de-un-selector-con-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/01\/css-for-selects.png\",\"datePublished\":\"2020-01-13T11:05:22+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Tutorial y c\u00f3digo de ejemplo que te permite cambiar la apariencia o aspecto de un selector de elementos utilizando solo t\u00e9cnicas CSS.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-cambiar-la-apariencia-de-un-selector-con-css\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/como-cambiar-la-apariencia-de-un-selector-con-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-cambiar-la-apariencia-de-un-selector-con-css\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/01\/css-for-selects.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/01\/css-for-selects.png\",\"width\":250,\"height\":250,\"caption\":\"CSS para selectores\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/como-cambiar-la-apariencia-de-un-selector-con-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Como cambiar la apariencia de un selector con CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Como cambiar la apariencia de un selector con CSS - Jose Aguilar Blog","description":"Tutorial y c\u00f3digo de ejemplo que te permite cambiar la apariencia o aspecto de un selector de elementos utilizando solo t\u00e9cnicas CSS.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Como cambiar la apariencia de un selector con CSS - Jose Aguilar Blog","og_description":"Tutorial y c\u00f3digo de ejemplo que te permite cambiar la apariencia o aspecto de un selector de elementos utilizando solo t\u00e9cnicas CSS.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/como-cambiar-la-apariencia-de-un-selector-con-css\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2020-01-13T11:05:22+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/01\/css-for-selects.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-cambiar-la-apariencia-de-un-selector-con-css\/","url":"https:\/\/www.jose-aguilar.com\/blog\/como-cambiar-la-apariencia-de-un-selector-con-css\/","name":"Como cambiar la apariencia de un selector con CSS - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-cambiar-la-apariencia-de-un-selector-con-css\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-cambiar-la-apariencia-de-un-selector-con-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/01\/css-for-selects.png","datePublished":"2020-01-13T11:05:22+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Tutorial y c\u00f3digo de ejemplo que te permite cambiar la apariencia o aspecto de un selector de elementos utilizando solo t\u00e9cnicas CSS.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/como-cambiar-la-apariencia-de-un-selector-con-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/como-cambiar-la-apariencia-de-un-selector-con-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-cambiar-la-apariencia-de-un-selector-con-css\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/01\/css-for-selects.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/01\/css-for-selects.png","width":250,"height":250,"caption":"CSS para selectores"},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/como-cambiar-la-apariencia-de-un-selector-con-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Como cambiar la apariencia de un selector con CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7513","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=7513"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7513\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7517"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}