{"id":10203,"date":"2018-04-25T07:40:53","date_gmt":"2018-04-25T07:40:53","guid":{"rendered":"https:\/\/www.templatemonster.com\/es\/blog\/?p=10203"},"modified":"2020-04-03T13:42:46","modified_gmt":"2020-04-03T13:42:46","slug":"como-hacer-elegantes-casillas-de-verificacion-y-botones-de-radio-con-css3","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/es\/como-hacer-elegantes-casillas-de-verificacion-y-botones-de-radio-con-css3\/","title":{"rendered":"C\u00f3mo hacer elegantes casillas de verificaci\u00f3n y botones de radio con CSS3"},"content":{"rendered":"

Todos estamos familiarizados con las casillas de verificaci\u00f3n HTML<\/strong>\u00a0(o checkboxes) y los botones de radio<\/strong> (o botones de opci\u00f3n). Lo m\u00e1s frustrante de ellos es que no hay forma de que cambiemos su apariencia.\u00a0Se ven de manera diferente, dependiendo del sistema operativo y navegador utilizado, y no podemos dise\u00f1arlos\u00a0con CSS.<\/p>\n

<\/p>\n

Esto molesta a\u00a0la mayor\u00eda de los dise\u00f1adores que desean hacer que esos elementos sean atractivos y que no arruinen todo el dise\u00f1o. En este tutorial, te mostraremos c\u00f3mo hacer que se vean realmente lindos con un truco sencillo.<\/p>\n

<\/div>\n

S\u00e9 fuerte. Oculta tus\u00a0casillas de verificaci\u00f3n<\/h3>\n

Esto puede\u00a0sonar contradictorio, pero para hacer que nuestras casillas de verificaci\u00f3n y botones de radio se vean bien, tenemos que ocultarlos y olvidarnos de ellos. S\u00ed, no hay necesidad de que se queden, as\u00ed que, simplemente aplicamos una regla sencilla:<\/p>\n

.section<\/span> input<\/span>[type=\"radio\"],\r\n<\/span>.section<\/span> input<\/span>[type=\"checkbox\"]{\r\n  <\/span>display<\/span>: <\/span>none<\/span>;\r\n}<\/span><\/pre>\n
\u00bfQu\u00e9 vamos a hacer sin ellos? No te preocupes, construiremos\u00a0nuevas casillas de verificaci\u00f3n. Bueno, vamos a ver c\u00f3mo hacer esto.<\/p>\n
Botones de radio<\/h3>\n
Primero, aqu\u00ed est\u00e1 nuestro mark-up:<\/p>\n
<section id=\"first\" class=\"section\">\r\n    <div class=\"container\">\r\n      <input type=\"radio\" name=\"group1\" id=\"radio-1\">\r\n      <label for=\"radio-1\"><span class=\"radio\">Coffee<\/span><\/label>\r\n    <\/div>\r\n    <div class=\"container\">\r\n      <input type=\"radio\" name=\"group1\" id=\"radio-2\">\r\n      <label for=\"radio-2\"><span class=\"radio\">Tea<\/span><\/label>\r\n    <\/div>\r\n    <div class=\"container\">\r\n      <input type=\"radio\" name=\"group1\" id=\"radio-3\">\r\n      <label for=\"radio-3\"><span class=\"radio\">Cappuccino<\/span><\/label>\r\n    <\/div>\r\n<\/section>\r\n<\/pre>\n
Tenemos una secci\u00f3n en la que vamos a colocar tres botones de radio.\u00a0Nos centraremos en las\u00a0casillas de verificaci\u00f3n m\u00e1s tarde, como el principio es el mismo. Cada entrada est\u00e1 envuelta en un div con una clase container (contenedor). Adem\u00e1s, cada entrada tiene una etiqueta (label) con un lapso (span).<\/p>\n
\u00a1Importante!<\/strong><\/p>\n
Como hemos ocultado las entradas de casilla de verificaci\u00f3n y\u00a0bot\u00f3n de radio, la \u00fanica forma de acceder a ellas ser\u00eda mediante el uso de una etiqueta.\u00a0 Para que funcione correctamente, la etiqueta deber\u00eda contener el atributo for<\/code> con\u00a0el ID de la entrada correspondiente.\u00a0Si una entrada tiene un ID radio-1<\/code>, entonces, el atributo\u00a0for<\/code>\u00a0tambi\u00e9n deber\u00eda ser\u00a0radio-1<\/code>.<\/p>\n
Es posible que te preguntes para qu\u00e9 envolvemos el texto dentro de cada etiqueta en un lapso:<\/p>\n
<div class=\"container\">\r\n      <input type=\"radio\" name=\"group1\" id=\"radio-1\">\r\n      <label for=\"radio-1\"><span class=\"radio\">Coffee<\/span><\/label>\r\n<\/div>\r\n<\/pre>\n
Dado que vamos a dar estilo a los botones de opci\u00f3n con pseudo-elementos ::before<\/code> y ::after<\/code>, necesitamos un elemento principal sobre la base del cual puedan colocarse. En este caso, ser\u00e1 nuestra etiqueta:<\/p>\n
.container label {\r\n  position: relative;\r\n}\r\n<\/pre>\n
Aqu\u00ed hay un conjunto de estilos que se comparte entre las casillas de verificaci\u00f3n y los botones de opci\u00f3n:<\/p>\n
.container span::before,\r\n.container span::after {\r\n  content: '';\r\n  position: absolute;\r\n  top: 0;\r\n  bottom: 0;\r\n  margin: auto;\r\n}\r\n<\/pre>\n
Las propiedades superiores e inferiores establecidas\u00a0como cero y combinadas con margin: auto;<\/code>\u00a0permiten que nuestros elementos tengan una posici\u00f3n horizontal centrada.<\/p>\n
As\u00ed es como se ve el resto de los estilos:<\/p>\n
.container span.radio:hover {\r\n  cursor<\/span>: <\/span>pointer<\/span>;<\/span><\/pre>\n
}\r\n.container span.radio::before {\r\n  left: -52px;\r\n  width: 45px;\r\n  height: 25px;\r\n  background-color: #A8AAC1;\r\n  border-radius: 50px;\r\n}\r\n.container span.radio::after {\r\n  left: -49px;\r\n  width: 17px;\r\n  height: 17px;\r\n  border-radius: 10px;\r\n  background-color: #6C788A;\r\n  transition: left .25s, background-color .25s;\r\n}\r\ninput<\/span>[type=\"radio\"]<\/span>:checked<\/span> + <\/span>label<\/span> span<\/span>.radio<\/span>::after<\/span> {\r\n  <\/span>left<\/span>: <\/span>-27<\/span>px<\/span>;\r\n  <\/span>background-color<\/span>: <\/span>#EBFF43<\/span>;\r\n}<\/span><\/pre>\n
<\/pre>\n
La parte m\u00e1s importante es el \u00faltimo conjunto de reglas que b\u00e1sicamente hace todo el truco. La pseudoclase\u00a0:checked<\/code> nos permite hacer cambios en los elementos cuando la entrada est\u00e1 marcada.\u00a0Con el selector '+' \u00a0podemos elegir el siguiente elemento \"hermano\" y dirigir nuestro\u00a0span.radio<\/code>, donde aplicamos nuevas reglas al pseudo elemento\u00a0::after<\/code>. En este caso cambiamos su posici\u00f3n horizontal y el color.<\/p>\n
Para que el cambio sea fluido, asignamos la transici\u00f3n de 0.25 segundos a la propiedad izquierda y al color de fondo. Ahora cuando hacemos clic en el bot\u00f3n de radio, el interruptor se mueve suavemente en lugar de saltar r\u00e1pidamente.<\/p>\n
Casillas de verificaci\u00f3n<\/h3>\n
Si necesitas crear casillas de verificaci\u00f3n personalizadas, el m\u00e9todo es el mismo. Echa un vistazo a los estilos:\u00a0<\/p>\n
.container span.checkbox::before {\r\n  width: 27px;\r\n  height: 27px;\r\n  background-color: #fff;\r\n  left: -35px;\r\n  box-sizing: border-box;\r\n  border: 3px solid transparent;\r\n  transition: border-color .2s;\r\n}\r\n.container span.checkbox:hover::before {\r\n  border: 3px solid #F0FF76;\r\n}\r\n.container span.checkbox::after {\r\n  content: '\\f00c';\r\n  font-family: 'FontAwesome';\r\n  left: -31px;\r\n  top: 2px;\r\n  color: transparent;\r\n  transition: color .2s;\r\n}\r\ninput[type=\"checkbox\"]:checked + label span.checkbox::after {\r\n  color: #62AFFF;\r\n}\r\n<\/pre>\n
La \u00fanica diferencia es que estamos usando un icono de la familia FontAwesome como nuestro pseudo elemento\u00a0::after<\/code>. Por defecto es transparente, pero cuando la casilla de verificaci\u00f3n est\u00e1 marcada, el icono se vuelve azul.<\/p>\n
Aparte<\/strong><\/p>\n
Si\u00a0quieres utilizar un icono de Font Awesome en tu pseudo elemento, necesitas incluir su c\u00f3digo en la propiedad del contenido y especificar la propiedad\u00a0de la familia de fuentes como FontAwesome<\/code>. Por ejemplo:<\/p>\n
{\r\ncontent: '\\f00c';\r\nfont-family: 'FontAwesome';\r\n}\r\n<\/pre>\n
El c\u00f3digo\u00a0f00c<\/code>\u00a0se precede\u00a0por una barra diagonal inversa que\u00a0se utiliza para escapar del car\u00e1cter de unicode. El unicode se puede encontrar en la p\u00e1gina de tu icono elegido:<\/p>\n
\"A<\/p>\n
Resultado final<\/h3>\n
Eso es. Ya hemos creado unas casillas de verificaci\u00f3n y botones de radio completamente funcionales y bonitos que puedes ajustar y usar en tus propios proyectos.<\/p>\n
See
\nthe Pen &lt;a href=\"http:\/\/codepen.io\/matthewcain\/pen\/KMgBxp\/\"&gt;Radio
\nbuttons and check boxes 2&lt;\/a&gt; by Matthew Cain (&lt;a
\nhref=\"http:\/\/codepen.io\/matthewcain\"&gt;@matthewcain&lt;\/a&gt;) on &lt;a
\nhref=\"http:\/\/codepen.io\"&gt;CodePen&lt;\/a&gt;.&lt;br \/&gt; <\/p>\n
Fuente: \"How To Make Stylish Checkboxes And Radio Buttons With CSS3<\/a>\" por Matthew Cain<\/p>\n","protected":false},"excerpt":{"rendered":"
Todos estamos familiarizados con las casillas de verificaci\u00f3n HTML\u00a0(o checkboxes) y los botones de radio (o botones de opci\u00f3n). Lo m\u00e1s frustrante de ellos es que no hay forma de que cambiemos su apariencia.\u00a0Se ven de manera diferente, dependiendo del sistema operativo y navegador utilizado, y no podemos dise\u00f1arlos\u00a0con CSS.<\/p>\n","protected":false},"author":1334762,"featured_media":10204,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[26,13],"tags":[533],"yoast_head":"\nC\u00f3mo hacer elegantes casillas de verificaci\u00f3n y botones de radio con CSS3<\/title>\n<meta name=\"description\" content=\"En este tutorial, te mostraremos c\u00f3mo hacer que las casillas de verificaci\u00f3n HTML y los botones de radio se vean realmente lindos con un truco sencillo.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monsterspost.com\/es\/como-hacer-elegantes-casillas-de-verificacion-y-botones-de-radio-con-css3\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo hacer elegantes casillas de verificaci\u00f3n y botones de radio con CSS3\" \/>\n<meta property=\"og:description\" content=\"En este tutorial, te mostraremos c\u00f3mo hacer que las casillas de verificaci\u00f3n HTML y los botones de radio se vean realmente lindos con un truco sencillo.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/es\/como-hacer-elegantes-casillas-de-verificacion-y-botones-de-radio-con-css3\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog de TemplateMonster\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TemplateMonsterEspana\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/profile.php?id=100004881674652\" \/>\n<meta property=\"article:published_time\" content=\"2018-04-25T07:40:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-03T13:42:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2018\/04\/lap.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"538\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Diane Parks\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TMonster_ES\" \/>\n<meta name=\"twitter:site\" content=\"@TMonster_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Diane Parks\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/es\/como-hacer-elegantes-casillas-de-verificacion-y-botones-de-radio-con-css3\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/es\/como-hacer-elegantes-casillas-de-verificacion-y-botones-de-radio-con-css3\/\"},\"author\":{\"name\":\"Diane Parks\",\"@id\":\"https:\/\/monsterspost.com\/es\/#\/schema\/person\/9347a229c99d039260b529468e03bb3c\"},\"headline\":\"C\u00f3mo hacer elegantes casillas de verificaci\u00f3n y botones de radio con CSS3\",\"datePublished\":\"2018-04-25T07:40:53+00:00\",\"dateModified\":\"2020-04-03T13:42:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/es\/como-hacer-elegantes-casillas-de-verificacion-y-botones-de-radio-con-css3\/\"},\"wordCount\":755,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/es\/#organization\"},\"keywords\":[\"CSS3\"],\"articleSection\":[\"Desarrollo web\",\"Tutoriales\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/es\/como-hacer-elegantes-casillas-de-verificacion-y-botones-de-radio-con-css3\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/es\/como-hacer-elegantes-casillas-de-verificacion-y-botones-de-radio-con-css3\/\",\"url\":\"https:\/\/monsterspost.com\/es\/como-hacer-elegantes-casillas-de-verificacion-y-botones-de-radio-con-css3\/\",\"name\":\"C\u00f3mo hacer elegantes casillas de verificaci\u00f3n y botones de radio con CSS3\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/es\/#website\"},\"datePublished\":\"2018-04-25T07:40:53+00:00\",\"dateModified\":\"2020-04-03T13:42:46+00:00\",\"description\":\"En este tutorial, te mostraremos c\u00f3mo hacer que las casillas de verificaci\u00f3n HTML y los botones de radio se vean realmente lindos con un truco sencillo.\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/es\/como-hacer-elegantes-casillas-de-verificacion-y-botones-de-radio-con-css3\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/es\/como-hacer-elegantes-casillas-de-verificacion-y-botones-de-radio-con-css3\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/es\/como-hacer-elegantes-casillas-de-verificacion-y-botones-de-radio-con-css3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo hacer elegantes casillas de verificaci\u00f3n y botones de radio con CSS3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/es\/#website\",\"url\":\"https:\/\/monsterspost.com\/es\/\",\"name\":\"Blog de TemplateMonster\",\"description\":\"Just another MonsterPost Sites site\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/es\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/es\/#organization\",\"name\":\"MonstersPost Espa\u00f1a\",\"url\":\"https:\/\/monsterspost.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/monsterspost.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonstersPost Espa\u00f1a\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/template_monster\/\",\"https:\/\/www.pinterest.com\/templatemonster\/\",\"https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/\",\"https:\/\/www.facebook.com\/TemplateMonsterEspana\",\"https:\/\/twitter.com\/TMonster_ES\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/es\/#\/schema\/person\/9347a229c99d039260b529468e03bb3c\",\"name\":\"Diane Parks\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/monsterspost.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9dc57114df7de4f9c97b5d1f73e7c5ff?s=96&d=https%3A%2F%2Fmonsterspost.com%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9dc57114df7de4f9c97b5d1f73e7c5ff?s=96&d=https%3A%2F%2Fmonsterspost.com%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Diane Parks\"},\"description\":\"Diane trabja como una redactora del blog MonsterPost Espa\u00f1a desde hace muchos a\u00f1os. No imagina su vida sin escribir, aprender algo nuevo cada d\u00eda, desarollarse personalmente y profesionalmente, y compartir sus conocimientos y experiencia con los lectores del blog. \u00a1S\u00edguela en Facebook!\",\"sameAs\":[\"https:\/\/www.facebook.com\/profile.php?id=100004881674652\"],\"url\":\"https:\/\/monsterspost.com\/es\/author\/diane\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo hacer elegantes casillas de verificaci\u00f3n y botones de radio con CSS3","description":"En este tutorial, te mostraremos c\u00f3mo hacer que las casillas de verificaci\u00f3n HTML y los botones de radio se vean realmente lindos con un truco sencillo.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/monsterspost.com\/es\/como-hacer-elegantes-casillas-de-verificacion-y-botones-de-radio-con-css3\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo hacer elegantes casillas de verificaci\u00f3n y botones de radio con CSS3","og_description":"En este tutorial, te mostraremos c\u00f3mo hacer que las casillas de verificaci\u00f3n HTML y los botones de radio se vean realmente lindos con un truco sencillo.","og_url":"https:\/\/monsterspost.com\/es\/como-hacer-elegantes-casillas-de-verificacion-y-botones-de-radio-con-css3\/","og_site_name":"Blog de TemplateMonster","article_publisher":"https:\/\/www.facebook.com\/TemplateMonsterEspana","article_author":"https:\/\/www.facebook.com\/profile.php?id=100004881674652","article_published_time":"2018-04-25T07:40:53+00:00","article_modified_time":"2020-04-03T13:42:46+00:00","og_image":[{"width":900,"height":538,"url":"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2018\/04\/lap.jpg","type":"image\/jpeg"}],"author":"Diane Parks","twitter_card":"summary_large_image","twitter_creator":"@TMonster_ES","twitter_site":"@TMonster_ES","twitter_misc":{"Escrito por":"Diane Parks","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/es\/como-hacer-elegantes-casillas-de-verificacion-y-botones-de-radio-con-css3\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/es\/como-hacer-elegantes-casillas-de-verificacion-y-botones-de-radio-con-css3\/"},"author":{"name":"Diane Parks","@id":"https:\/\/monsterspost.com\/es\/#\/schema\/person\/9347a229c99d039260b529468e03bb3c"},"headline":"C\u00f3mo hacer elegantes casillas de verificaci\u00f3n y botones de radio con CSS3","datePublished":"2018-04-25T07:40:53+00:00","dateModified":"2020-04-03T13:42:46+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/es\/como-hacer-elegantes-casillas-de-verificacion-y-botones-de-radio-con-css3\/"},"wordCount":755,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/es\/#organization"},"keywords":["CSS3"],"articleSection":["Desarrollo web","Tutoriales"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/es\/como-hacer-elegantes-casillas-de-verificacion-y-botones-de-radio-con-css3\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/es\/como-hacer-elegantes-casillas-de-verificacion-y-botones-de-radio-con-css3\/","url":"https:\/\/monsterspost.com\/es\/como-hacer-elegantes-casillas-de-verificacion-y-botones-de-radio-con-css3\/","name":"C\u00f3mo hacer elegantes casillas de verificaci\u00f3n y botones de radio con CSS3","isPartOf":{"@id":"https:\/\/monsterspost.com\/es\/#website"},"datePublished":"2018-04-25T07:40:53+00:00","dateModified":"2020-04-03T13:42:46+00:00","description":"En este tutorial, te mostraremos c\u00f3mo hacer que las casillas de verificaci\u00f3n HTML y los botones de radio se vean realmente lindos con un truco sencillo.","breadcrumb":{"@id":"https:\/\/monsterspost.com\/es\/como-hacer-elegantes-casillas-de-verificacion-y-botones-de-radio-con-css3\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/es\/como-hacer-elegantes-casillas-de-verificacion-y-botones-de-radio-con-css3\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/es\/como-hacer-elegantes-casillas-de-verificacion-y-botones-de-radio-con-css3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/es\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo hacer elegantes casillas de verificaci\u00f3n y botones de radio con CSS3"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/es\/#website","url":"https:\/\/monsterspost.com\/es\/","name":"Blog de TemplateMonster","description":"Just another MonsterPost Sites site","publisher":{"@id":"https:\/\/monsterspost.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/es\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/es\/#organization","name":"MonstersPost Espa\u00f1a","url":"https:\/\/monsterspost.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/monsterspost.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/es\/wp-content\/uploads\/sites\/4\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonstersPost Espa\u00f1a"},"image":{"@id":"https:\/\/monsterspost.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/template_monster\/","https:\/\/www.pinterest.com\/templatemonster\/","https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/","https:\/\/www.facebook.com\/TemplateMonsterEspana","https:\/\/twitter.com\/TMonster_ES"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/es\/#\/schema\/person\/9347a229c99d039260b529468e03bb3c","name":"Diane Parks","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/monsterspost.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9dc57114df7de4f9c97b5d1f73e7c5ff?s=96&d=https%3A%2F%2Fmonsterspost.com%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9dc57114df7de4f9c97b5d1f73e7c5ff?s=96&d=https%3A%2F%2Fmonsterspost.com%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Diane Parks"},"description":"Diane trabja como una redactora del blog MonsterPost Espa\u00f1a desde hace muchos a\u00f1os. No imagina su vida sin escribir, aprender algo nuevo cada d\u00eda, desarollarse personalmente y profesionalmente, y compartir sus conocimientos y experiencia con los lectores del blog. \u00a1S\u00edguela en Facebook!","sameAs":["https:\/\/www.facebook.com\/profile.php?id=100004881674652"],"url":"https:\/\/monsterspost.com\/es\/author\/diane\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/posts\/10203"}],"collection":[{"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/users\/1334762"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/comments?post=10203"}],"version-history":[{"count":4,"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/posts\/10203\/revisions"}],"predecessor-version":[{"id":21445,"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/posts\/10203\/revisions\/21445"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/media\/10204"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/media?parent=10203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/categories?post=10203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/es\/wp-json\/wp\/v2\/tags?post=10203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}