{"id":559,"date":"2018-04-24T10:12:03","date_gmt":"2018-04-24T10:12:03","guid":{"rendered":"https:\/\/www.templatemonster.com\/fr\/blog\/?p=559"},"modified":"2020-05-21T10:59:59","modified_gmt":"2020-05-21T10:59:59","slug":"comment-faire-des-cases-a-cocher-elegantes-et-des-boutons-radio-avec-css3","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/fr\/comment-faire-des-cases-a-cocher-elegantes-et-des-boutons-radio-avec-css3\/","title":{"rendered":"Comment faire des cases \u00e0 cocher \u00e9l\u00e9gantes et des boutons radio avec CSS3"},"content":{"rendered":"<ul>\n<li><a href=\"#title1\">Introduction<\/a><\/li>\n<li><a href=\"#title2\">Soyez fort. Masquez vos cases \u00e0 cocher<\/a><\/li>\n<li><a href=\"#title3\">Boutons Radio<\/a><\/li>\n<li><a href=\"#title4\">Cases \u00e0 cocher<\/a><\/li>\n<li><a href=\"#title5\">R\u00e9sultat final<\/a><\/li>\n<li><a href=\"#title6\">Conclusion<\/a><\/li>\n<\/ul>\n<h2 id=\"title1\">Introduction<\/h2>\n<p>Nous connaissons tous les <strong>cases \u00e0 cocher et boutons radio HTML<\/strong>. La chose la plus frustrante \u00e0 leur sujet, c'est qu'il n'y a aucun moyen pour nous de changer leur apparence. Ils ont un aspect diff\u00e9rent selon votre syst\u00e8me d'exploitation et votre navigateur, et nous ne pouvons pas les styler en utilisant CSS.<\/p>\n<p>Cela peut \u00eatre ennuyeux pour la plupart des concepteurs, qui veulent rendre ces \u00e9l\u00e9ments attrayants, afin qu'ils ne g\u00e2chent pas le design. Dans ce tutoriel, je vais vous montrer comment les rendre vraiment mignons avec un truc simple.<\/p>\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.templatemonster.com\/fr\/type\/modeles-html\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" width=\"728\" height=\"90\" src=\"https:\/\/www.templatemonster.com\/blog\/fr\/wp-content\/uploads\/sites\/9\/2018\/04\/HTML_728\u044590_fr-min.jpg\" alt=\"\" class=\"wp-image-4045\" srcset=\"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/04\/HTML_728\u044590_fr-min.jpg 728w, https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/04\/HTML_728\u044590_fr-min-300x37.jpg 300w\" sizes=\"(max-width: 728px) 100vw, 728px\" \/><\/a><\/figure>\n<h2 id=\"title2\">Soyez fort. Masquez vos cases \u00e0 cocher<\/h2>\n<p>Cela peut para\u00eetre contre-intuitif, mais pour que nos cases \u00e0 cocher et nos boutons radio soient beaux, nous devons les cacher et les oublier ! Oui, ils n'ont plus besoin de rester, donc nous appliquons simplement une r\u00e8gle simple :<\/p>\n<pre class=\"wp-block-preformatted\"><span style=\"font-style: italic\">.section<\/span> <span style=\"font-weight: bold\">input<\/span>[type=\"radio\"],\n<span style=\"font-style: italic\">.section<\/span> <span style=\"font-weight: bold\">input<\/span>[type=\"checkbox\"]{\n  <span style=\"color: #6d79de;font-weight: bold\">display<\/span>: <span style=\"color: #06960e;font-weight: bold\">none<\/span>;\n}\n<\/pre>\n<p>Mais, qu'allons-nous faire sans eux ? Aucun soucis, <strong>nous allons construire nos propres cases \u00e0 cocher, avec le blackjack et ...<\/strong> bien, passons juste devant.<\/p>\n<h2 id=\"title3\">Boutons Radio<\/h2>\n<p>Tout d'abord, il y a notre marge :<\/p>\n<pre class=\"wp-block-preformatted\"><span style=\"color: #1c02ff\">&lt;<span style=\"font-weight: bold\">section<\/span> <span style=\"font-style: italic\">id<\/span>=<span style=\"color: #036a07\">\"first\"<\/span> <span style=\"font-style: italic\">class<\/span>=<span style=\"color: #036a07\">\"section\"<\/span>&gt;<\/span>\n    <span style=\"color: #1c02ff\">&lt;<span style=\"font-weight: bold\">div<\/span> <span style=\"font-style: italic\">class<\/span>=<span style=\"color: #036a07\">\"container\"<\/span>&gt;<\/span>\n      <span style=\"color: #1c02ff\">&lt;<span style=\"font-weight: bold\">input<\/span> <span style=\"font-style: italic\">type<\/span>=<span style=\"color: #036a07\">\"radio\"<\/span> <span style=\"font-style: italic\">name<\/span>=<span style=\"color: #036a07\">\"group1\"<\/span> <span style=\"font-style: italic\">id<\/span>=<span style=\"color: #036a07\">\"radio-1\"<\/span>&gt;<\/span>\n      <span style=\"color: #1c02ff\">&lt;<span style=\"font-weight: bold\">label<\/span> <span style=\"font-style: italic\">for<\/span>=<span style=\"color: #036a07\">\"radio-1\"<\/span>&gt;<\/span><span style=\"color: #1c02ff\">&lt;<span style=\"font-weight: bold\">span<\/span> <span style=\"font-style: italic\">class<\/span>=<span style=\"color: #036a07\">\"radio\"<\/span>&gt;<\/span>Coffee<span style=\"color: #1c02ff\">&lt;\/<span style=\"font-weight: bold\">span<\/span>&gt;<\/span><span style=\"color: #1c02ff\">&lt;\/<span style=\"font-weight: bold\">label<\/span>&gt;<\/span>\n    <span style=\"color: #1c02ff\">&lt;\/<span style=\"font-weight: bold\">div<\/span>&gt;<\/span>\n    <span style=\"color: #1c02ff\">&lt;<span style=\"font-weight: bold\">div<\/span> <span style=\"font-style: italic\">class<\/span>=<span style=\"color: #036a07\">\"container\"<\/span>&gt;<\/span>\n      <span style=\"color: #1c02ff\">&lt;<span style=\"font-weight: bold\">input<\/span> <span style=\"font-style: italic\">type<\/span>=<span style=\"color: #036a07\">\"radio\"<\/span> <span style=\"font-style: italic\">name<\/span>=<span style=\"color: #036a07\">\"group1\"<\/span> <span style=\"font-style: italic\">id<\/span>=<span style=\"color: #036a07\">\"radio-2\"<\/span>&gt;<\/span>\n      <span style=\"color: #1c02ff\">&lt;<span style=\"font-weight: bold\">label<\/span> <span style=\"font-style: italic\">for<\/span>=<span style=\"color: #036a07\">\"radio-2\"<\/span>&gt;<\/span><span style=\"color: #1c02ff\">&lt;<span style=\"font-weight: bold\">span<\/span> <span style=\"font-style: italic\">class<\/span>=<span style=\"color: #036a07\">\"radio\"<\/span>&gt;<\/span>Tea<span style=\"color: #1c02ff\">&lt;\/<span style=\"font-weight: bold\">span<\/span>&gt;<\/span><span style=\"color: #1c02ff\">&lt;\/<span style=\"font-weight: bold\">label<\/span>&gt;<\/span>\n    <span style=\"color: #1c02ff\">&lt;\/<span style=\"font-weight: bold\">div<\/span>&gt;<\/span>\n    <span style=\"color: #1c02ff\">&lt;<span style=\"font-weight: bold\">div<\/span> <span style=\"font-style: italic\">class<\/span>=<span style=\"color: #036a07\">\"container\"<\/span>&gt;<\/span>\n      <span style=\"color: #1c02ff\">&lt;<span style=\"font-weight: bold\">input<\/span> <span style=\"font-style: italic\">type<\/span>=<span style=\"color: #036a07\">\"radio\"<\/span> <span style=\"font-style: italic\">name<\/span>=<span style=\"color: #036a07\">\"group1\"<\/span> <span style=\"font-style: italic\">id<\/span>=<span style=\"color: #036a07\">\"radio-3\"<\/span>&gt;<\/span>\n      <span style=\"color: #1c02ff\">&lt;<span style=\"font-weight: bold\">label<\/span> <span style=\"font-style: italic\">for<\/span>=<span style=\"color: #036a07\">\"radio-3\"<\/span>&gt;<\/span><span style=\"color: #1c02ff\">&lt;<span style=\"font-weight: bold\">span<\/span> <span style=\"font-style: italic\">class<\/span>=<span style=\"color: #036a07\">\"radio\"<\/span>&gt;<\/span>Cappuccino<span style=\"color: #1c02ff\">&lt;\/<span style=\"font-weight: bold\">span<\/span>&gt;<\/span><span style=\"color: #1c02ff\">&lt;\/<span style=\"font-weight: bold\">label<\/span>&gt;<\/span>\n    <span style=\"color: #1c02ff\">&lt;\/<span style=\"font-weight: bold\">div<\/span>&gt;<\/span>\n<span style=\"color: #1c02ff\">&lt;\/<span style=\"font-weight: bold\">section<\/span>&gt;<\/span>\n<\/pre>\n<p>Nous avons une section o\u00f9 nous allons contenir trois boutons radio. Nous allons couvrir les cases \u00e0 cocher plus loin dans ce tutoriel, le principe est le m\u00eame. Chaque entr\u00e9e est envelopp\u00e9e dans un div avec un <code>container<\/code> class. En outre, chaque entr\u00e9e a une \u00e9tiquette avec une port\u00e9e en elle.<\/p>\n<p><strong>Important !<\/strong><\/p>\n<p>Puisque nous avons cach\u00e9 les entr\u00e9es radio et cases \u00e0 cocher, la seule fa\u00e7on pour nous d'y acc\u00e9der serait d'utiliser une label tag. Pour fonctionner correctement, le label doit contenir l'attribut <code>for<\/code> avec l'identifiant de l'entr\u00e9e correspondante. Si une entr\u00e9e a un ID <code>radio-1<\/code>, alors l'attribut <code>for<\/code> devrait aussi \u00eatre <code>radio-1<\/code>.<\/p>\n<p>Vous vous demandez peut-\u00eatre pourquoi j'ai envelopp\u00e9 le texte \u00e0 l'int\u00e9rieur de chaque label dans un span :<\/p>\n<pre class=\"wp-block-preformatted\"><span style=\"color: #1c02ff\">&lt;<span style=\"font-weight: bold\">div<\/span> <span style=\"font-style: italic\">class<\/span>=<span style=\"color: #036a07\">\"container\"<\/span>&gt;<\/span>\n      <span style=\"color: #1c02ff\">&lt;<span style=\"font-weight: bold\">input<\/span> <span style=\"font-style: italic\">type<\/span>=<span style=\"color: #036a07\">\"radio\"<\/span> <span style=\"font-style: italic\">name<\/span>=<span style=\"color: #036a07\">\"group1\"<\/span> <span style=\"font-style: italic\">id<\/span>=<span style=\"color: #036a07\">\"radio-1\"<\/span>&gt;<\/span>\n      <span style=\"color: #1c02ff\">&lt;<span style=\"font-weight: bold\">label<\/span> <span style=\"font-style: italic\">for<\/span>=<span style=\"color: #036a07\">\"radio-1\"<\/span>&gt;<\/span><span style=\"color: #1c02ff\">&lt;<span style=\"font-weight: bold\">span<\/span> <span style=\"font-style: italic\">class<\/span>=<span style=\"color: #036a07\">\"radio\"<\/span>&gt;<\/span>Coffee<span style=\"color: #1c02ff\">&lt;\/<span style=\"font-weight: bold\">span<\/span>&gt;<\/span><span style=\"color: #1c02ff\">&lt;\/<span style=\"font-weight: bold\">label<\/span>&gt;<\/span>\n<span style=\"color: #1c02ff\">&lt;\/<span style=\"font-weight: bold\">div<\/span>&gt;<\/span>\n<\/pre>\n<p>Puisque nous allons cr\u00e9er des boutons radio avec les pseudo-\u00e9l\u00e9ments <code>::before<\/code> et <code>::after<\/code>, nous avons besoin d'un \u00e9l\u00e9ment parent, sur la base duquel ils peuvent \u00eatre positionn\u00e9s. Dans ce cas, ce sera notre label :<\/p>\n<pre class=\"wp-block-preformatted\"><span style=\"font-style: italic\">.container<\/span> <span style=\"font-weight: bold\">label<\/span> {\n  <span style=\"color: #6d79de;font-weight: bold\">position<\/span>: <span style=\"color: #06960e;font-weight: bold\">relative<\/span>;\n}\n<\/pre>\n<p>Voici un ensemble de styles partag\u00e9s entre les cases \u00e0 cocher et les boutons radio :<\/p>\n<pre class=\"wp-block-preformatted\"><span style=\"font-style: italic\">.container<\/span> <span style=\"font-weight: bold\">span<\/span><span style=\"font-style: italic\">::before<\/span>,\n<span style=\"font-style: italic\">.container<\/span> <span style=\"font-weight: bold\">span<\/span><span style=\"font-style: italic\">::after<\/span> {\n  <span style=\"color: #6d79de;font-weight: bold\">content<\/span>: <span style=\"color: #036a07\">''<\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">position<\/span>: <span style=\"color: #06960e;font-weight: bold\">absolute<\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">top<\/span>: <span style=\"color: #0000cd\">0<\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">bottom<\/span>: <span style=\"color: #0000cd\">0<\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">margin<\/span>: <span style=\"color: #06960e;font-weight: bold\">auto<\/span>;\n}\n<\/pre>\n<p>Les propri\u00e9t\u00e9s du haut et du bas sont mises \u00e0 z\u00e9ro et combin\u00e9es avec <code>margin: auto;<\/code> ce qui permet \u00e0 nos \u00e9l\u00e9ments d'avoir une position horizontale centr\u00e9e.<\/p>\n<p>Voici \u00e0 quoi ressemble le reste des styles :<\/p>\n<pre class=\"wp-block-preformatted\"><span style=\"font-style: italic\">.container<\/span> <span style=\"font-weight: bold\">span<\/span><span style=\"font-style: italic\">.radio<\/span><span style=\"font-style: italic\">:hover<\/span> {\n  <span style=\"color: #6d79de;font-weight: bold\">cursor<\/span>: <span style=\"color: #06960e;font-weight: bold\">pointer<\/span>;\n}\n<span style=\"font-style: italic\">.container<\/span> <span style=\"font-weight: bold\">span<\/span><span style=\"font-style: italic\">.radio<\/span><span style=\"font-style: italic\">::before<\/span> {\n  <span style=\"color: #6d79de;font-weight: bold\">left<\/span>: <span style=\"color: #0000cd\">-52<span style=\"color: #00f;font-weight: bold\">px<\/span><\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">width<\/span>: <span style=\"color: #0000cd\">45<span style=\"color: #00f;font-weight: bold\">px<\/span><\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">height<\/span>: <span style=\"color: #0000cd\">25<span style=\"color: #00f;font-weight: bold\">px<\/span><\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">background-color<\/span>: <span style=\"color: #c5060b;font-weight: bold\">#A8AAC1<\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">border-radius<\/span>: <span style=\"color: #0000cd\">50<span style=\"color: #00f;font-weight: bold\">px<\/span><\/span>;\n}\n<span style=\"font-style: italic\">.container<\/span> <span style=\"font-weight: bold\">span<\/span><span style=\"font-style: italic\">.radio<\/span><span style=\"font-style: italic\">::after<\/span> {\n  <span style=\"color: #6d79de;font-weight: bold\">left<\/span>: <span style=\"color: #0000cd\">-49<span style=\"color: #00f;font-weight: bold\">px<\/span><\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">width<\/span>: <span style=\"color: #0000cd\">17<span style=\"color: #00f;font-weight: bold\">px<\/span><\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">height<\/span>: <span style=\"color: #0000cd\">17<span style=\"color: #00f;font-weight: bold\">px<\/span><\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">border-radius<\/span>: <span style=\"color: #0000cd\">10<span style=\"color: #00f;font-weight: bold\">px<\/span><\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">background-color<\/span>: <span style=\"color: #c5060b;font-weight: bold\">#6C788A<\/span>;\n  transition: <span style=\"color: #06960e;font-weight: bold\">left<\/span> <span style=\"color: #0000cd\">.25<span style=\"color: #00f;font-weight: bold\">s<\/span><\/span>, background-color <span style=\"color: #0000cd\">.25<span style=\"color: #00f;font-weight: bold\">s<\/span><\/span>;\n}\n<span style=\"font-weight: bold\">input<\/span>[type=\"radio\"]<span style=\"font-style: italic\">:checked<\/span> + <span style=\"font-weight: bold\">label<\/span> <span style=\"font-weight: bold\">span<\/span><span style=\"font-style: italic\">.radio<\/span><span style=\"font-style: italic\">::after<\/span> {\n  <span style=\"color: #6d79de;font-weight: bold\">left<\/span>: <span style=\"color: #0000cd\">-27<span style=\"color: #00f;font-weight: bold\">px<\/span><\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">background-color<\/span>: <span style=\"color: #c5060b;font-weight: bold\">#EBFF43<\/span>;\n}\n<\/pre>\n<p>La partie la plus importante est la derni\u00e8re s\u00e9rie de r\u00e8gles, qui fait tout le tour. La pseudo-classe <code>:checked<\/code> nous permet d'apporter des modifications aux \u00e9l\u00e9ments lorsque l'entr\u00e9e est coch\u00e9e. Avec un s\u00e9lecteur '+', nous pouvons choisir l'\u00e9l\u00e9ment fr\u00e8re suivant, et cibler notre <code>span.radio<\/code>, o\u00f9 nous appliquons de nouvelles r\u00e8gles au pseudo-\u00e9l\u00e9ment <code>::after<\/code>. Dans ce cas, nous changeons sa position horizontale et sa couleur.<\/p>\n<p>Afin de rendre le changement plus fluide, nous assignons la transition de 0,25 seconde \u00e0 la propri\u00e9t\u00e9 de gauche et \u00e0 la couleur de fond. Maintenant, lorsque nous cliquons sur le bouton radio, l'interrupteur se d\u00e9place doucement au lieu de sauter rapidement.<\/p>\n<h2 id=\"title4\">Cases \u00e0 cocher<\/h2>\n<p>Si vous devez cr\u00e9er des cases \u00e0 cocher personnalis\u00e9es, la m\u00e9thode est la m\u00eame. Jetez un oeil sur les styles :<\/p>\n<pre class=\"wp-block-preformatted\"><span style=\"font-style: italic\">.container<\/span> <span style=\"font-weight: bold\">span<\/span><span style=\"font-style: italic\">.checkbox<\/span><span style=\"font-style: italic\">::before<\/span> {\n  <span style=\"color: #6d79de;font-weight: bold\">width<\/span>: <span style=\"color: #0000cd\">27<span style=\"color: #00f;font-weight: bold\">px<\/span><\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">height<\/span>: <span style=\"color: #0000cd\">27<span style=\"color: #00f;font-weight: bold\">px<\/span><\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">background-color<\/span>: <span style=\"color: #c5060b;font-weight: bold\">#fff<\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">left<\/span>: <span style=\"color: #0000cd\">-35<span style=\"color: #00f;font-weight: bold\">px<\/span><\/span>;\n  box-sizing: border-box;\n  <span style=\"color: #6d79de;font-weight: bold\">border<\/span>: <span style=\"color: #0000cd\">3<span style=\"color: #00f;font-weight: bold\">px<\/span><\/span> <span style=\"color: #06960e;font-weight: bold\">solid<\/span> <span style=\"color: #06960e;font-weight: bold\">transparent<\/span>;\n  transition: border-color <span style=\"color: #0000cd\">.2<span style=\"color: #00f;font-weight: bold\">s<\/span><\/span>;\n}\n<span style=\"font-style: italic\">.container<\/span> <span style=\"font-weight: bold\">span<\/span><span style=\"font-style: italic\">.checkbox<\/span><span style=\"font-style: italic\">:hover<\/span><span style=\"font-style: italic\">::before<\/span> {\n  <span style=\"color: #6d79de;font-weight: bold\">border<\/span>: <span style=\"color: #0000cd\">3<span style=\"color: #00f;font-weight: bold\">px<\/span><\/span> <span style=\"color: #06960e;font-weight: bold\">solid<\/span> <span style=\"color: #c5060b;font-weight: bold\">#F0FF76<\/span>;\n}\n<span style=\"font-style: italic\">.container<\/span> <span style=\"font-weight: bold\">span<\/span><span style=\"font-style: italic\">.checkbox<\/span><span style=\"font-style: italic\">::after<\/span> {\n  <span style=\"color: #6d79de;font-weight: bold\">content<\/span>: <span style=\"color: #036a07\">'<span style=\"color: #26b31a\">\\f<\/span>00c'<\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">font-family<\/span>: <span style=\"color: #036a07\">'FontAwesome'<\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">left<\/span>: <span style=\"color: #0000cd\">-31<span style=\"color: #00f;font-weight: bold\">px<\/span><\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">top<\/span>: <span style=\"color: #0000cd\">2<span style=\"color: #00f;font-weight: bold\">px<\/span><\/span>;\n  <span style=\"color: #6d79de;font-weight: bold\">color<\/span>: <span style=\"color: #06960e;font-weight: bold\">transparent<\/span>;\n  transition: color <span style=\"color: #0000cd\">.2<span style=\"color: #00f;font-weight: bold\">s<\/span><\/span>;\n}\n<span style=\"font-weight: bold\">input<\/span>[type=\"checkbox\"]<span style=\"font-style: italic\">:checked<\/span> + <span style=\"font-weight: bold\">label<\/span> <span style=\"font-weight: bold\">span<\/span><span style=\"font-style: italic\">.checkbox<\/span><span style=\"font-style: italic\">::after<\/span> {\n  <span style=\"color: #6d79de;font-weight: bold\">color<\/span>: <span style=\"color: #c5060b;font-weight: bold\">#62AFFF<\/span>;\n}\n<\/pre>\n<p>La seule diff\u00e9rence est que nous utilisons une ic\u00f4ne de la famille FontAwesome comme notre pseudo-\u00e9l\u00e9ment <code>::after<\/code>. Par d\u00e9faut, il est transparent, mais lorsque la case est coch\u00e9e, l'ic\u00f4ne devient bleue.<\/p>\n<h3><strong>D\u00e9rogation<\/strong><\/h3>\n<p>Si vous souhaitez utiliser une ic\u00f4ne FontAwesome dans votre pseudo-\u00e9l\u00e9ment, vous devez inclure son code dans la propri\u00e9t\u00e9 content et sp\u00e9cifier la propri\u00e9t\u00e9 font-family en tant que <code>FontAwesome<\/code>. Par exemple :<\/p>\n<pre class=\"wp-block-preformatted\">{\n<span style=\"color: #6d79de;font-weight: bold\">content<\/span>: <span style=\"color: #036a07\">'<span style=\"color: #26b31a\">\\f<\/span>00c'<\/span>;\n<span style=\"color: #6d79de;font-weight: bold\">font-family<\/span>: <span style=\"color: #036a07\">'FontAwesome'<\/span>;\n}\n<\/pre>\n<p>Le code <code>f00c<\/code> est pr\u00e9c\u00e9d\u00e9 d'une barre oblique inverse, qui est n\u00e9cessaire pour \u00e9chapper le caract\u00e8re unicode. L'Unicode peut \u00eatre trouv\u00e9 sur la page de l'ic\u00f4ne choisie :<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" loading=\"lazy\" width=\"825\" height=\"467\" src=\"https:\/\/www.templatemonster.com\/blog\/fr\/wp-content\/uploads\/2018\/04\/font-awesome-icon-unicode.png\" alt=\"\" class=\"wp-image-566\" srcset=\"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/04\/font-awesome-icon-unicode.png 825w, https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/04\/font-awesome-icon-unicode-300x170.png 300w, https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/04\/font-awesome-icon-unicode-768x435.png 768w\" sizes=\"(max-width: 825px) 100vw, 825px\" \/><\/figure>\n<\/div>\n<h3>&nbsp;<\/h3>\n<h2 id=\"title5\">R\u00e9sultat final<\/h2>\n<p>C'est tout. Nous avons maintenant cr\u00e9\u00e9 des cases \u00e0 cocher et des boutons radio enti\u00e8rement fonctionnels et magnifiques, que vous pouvez modifier et utiliser pour vos propres projets. Vous pouvez voir le code source complet dans la d\u00e9monstration CodePen :<\/p>\n<p>Regardez le Pen <a href=\"http:\/\/codepen.io\/matthewcain\/pen\/KMgBxp\/\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\">Boutons radio et cases \u00e0 cocher 2<\/a> par Matthew Cain (<a href=\"http:\/\/codepen.io\/matthewcain\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\">@matthewcain<\/a>) sur <a href=\"http:\/\/codepen.io\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\">CodePen<\/a>.<\/p>\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.templatemonster.com\/fr\/type\/modeles-html\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" width=\"728\" height=\"90\" src=\"https:\/\/www.templatemonster.com\/blog\/fr\/wp-content\/uploads\/sites\/9\/2018\/04\/HTML_728\u044590_fr-min.jpg\" alt=\"\" class=\"wp-image-4045\" srcset=\"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/04\/HTML_728\u044590_fr-min.jpg 728w, https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/04\/HTML_728\u044590_fr-min-300x37.jpg 300w\" sizes=\"(max-width: 728px) 100vw, 728px\" \/><\/a><\/figure>\n<h2 id=\"title6\">Conclusion<\/h2>\n<p>Si vous trouvez ce tutoriel utile, ou si vous avez des questions, n'h\u00e9sitez pas \u00e0 nous en faire part dans la section commentaires ci-dessous. Merci !<\/p>\n<hr class=\"wp-block-separator\" \/>\n<h2>Articles \u00e0 lire<\/h2>\n<p><a title=\"20 mod\u00e8les HTML5 adaptatifs gratuits pour mai 2020\" rel=\"\" href=\"https:\/\/www.templatemonster.com\/blog\/fr\/15-modeles-html5-adaptatifs-gratuits\/\" target=\"_blank\">20 mod\u00e8les HTML5 adaptatifs gratuits pour mai 2020<\/a><\/p>\n<p><a title=\"Mise \u00e0 jour: Meilleurs outils d\u2019animation HTML5 gratuits\" rel=\"\" href=\"https:\/\/www.templatemonster.com\/blog\/fr\/meilleurs-outils-danimation-html5-gratuits-2018-pour-definir-vos-pages-en-mouvement\/\" target=\"_blank\">Mise \u00e0 jour: Meilleurs outils d\u2019animation HTML5 gratuits<\/a><\/p>\n<p><a title=\"Galerie de photos pour votre site Web HTML5 \u2013 Tutoriels jQuery et CSS3\" rel=\"\" href=\"https:\/\/www.templatemonster.com\/blog\/fr\/creer-galerie-photos-site-html5-jquery-css3\/\" target=\"_blank\">Galerie de photos pour votre site Web HTML5 \u2013 Tutoriels jQuery et CSS3<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Soyez fort. Masquez vos cases \u00e0 cocher Boutons Radio Cases \u00e0 cocher R\u00e9sultat final Conclusion Introduction Nous connaissons tous les cases \u00e0 cocher et boutons radio HTML. La chose la plus frustrante \u00e0 leur sujet, c'est qu'il n'y a aucun moyen pour nous de changer leur apparence. Ils ont un aspect diff\u00e9rent selon votre [&hellip;]<\/p>\n","protected":false},"author":1672325,"featured_media":565,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[29,25],"tags":[53,54],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.11 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Faire des cases \u00e0 cocher \u00e9l\u00e9gantes et des boutons radio avec CSS3<\/title>\n<meta name=\"description\" content=\"Nous connaissons tous les cases \u00e0 cocher et boutons radio HTML. La chose frustrante \u00e0 leur sujet, c&#039;est qu&#039;il n&#039;y a pas moyen de changer leur apparence\" \/>\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\/fr\/comment-faire-des-cases-a-cocher-elegantes-et-des-boutons-radio-avec-css3\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Faire des cases \u00e0 cocher \u00e9l\u00e9gantes et des boutons radio avec CSS3\" \/>\n<meta property=\"og:description\" content=\"Nous connaissons tous les cases \u00e0 cocher et boutons radio HTML. La chose frustrante \u00e0 leur sujet, c&#039;est qu&#039;il n&#039;y a pas moyen de changer leur apparence\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/fr\/comment-faire-des-cases-a-cocher-elegantes-et-des-boutons-radio-avec-css3\/\" \/>\n<meta property=\"og:site_name\" content=\"TemplateMonster Blog France\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TemplateMonsterFrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-04-24T10:12:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-05-21T10:59:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/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=\"Claire\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TM_France\" \/>\n<meta name=\"twitter:site\" content=\"@TM_France\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Claire\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/fr\/comment-faire-des-cases-a-cocher-elegantes-et-des-boutons-radio-avec-css3\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/comment-faire-des-cases-a-cocher-elegantes-et-des-boutons-radio-avec-css3\/\"},\"author\":{\"name\":\"Claire\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/4884946d097972046d54ec3b5524621c\"},\"headline\":\"Comment faire des cases \u00e0 cocher \u00e9l\u00e9gantes et des boutons radio avec CSS3\",\"datePublished\":\"2018-04-24T10:12:03+00:00\",\"dateModified\":\"2020-05-21T10:59:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/comment-faire-des-cases-a-cocher-elegantes-et-des-boutons-radio-avec-css3\/\"},\"wordCount\":769,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/#organization\"},\"keywords\":[\"CSS3\",\"HTML5\"],\"articleSection\":[\"D\u00e9veloppement Web\",\"Tutoriels\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/fr\/comment-faire-des-cases-a-cocher-elegantes-et-des-boutons-radio-avec-css3\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/fr\/comment-faire-des-cases-a-cocher-elegantes-et-des-boutons-radio-avec-css3\/\",\"url\":\"https:\/\/monsterspost.com\/fr\/comment-faire-des-cases-a-cocher-elegantes-et-des-boutons-radio-avec-css3\/\",\"name\":\"Faire des cases \u00e0 cocher \u00e9l\u00e9gantes et des boutons radio avec CSS3\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/#website\"},\"datePublished\":\"2018-04-24T10:12:03+00:00\",\"dateModified\":\"2020-05-21T10:59:59+00:00\",\"description\":\"Nous connaissons tous les cases \u00e0 cocher et boutons radio HTML. La chose frustrante \u00e0 leur sujet, c'est qu'il n'y a pas moyen de changer leur apparence\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/comment-faire-des-cases-a-cocher-elegantes-et-des-boutons-radio-avec-css3\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/fr\/comment-faire-des-cases-a-cocher-elegantes-et-des-boutons-radio-avec-css3\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/fr\/comment-faire-des-cases-a-cocher-elegantes-et-des-boutons-radio-avec-css3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Comment faire des cases \u00e0 cocher \u00e9l\u00e9gantes et des boutons radio avec CSS3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#website\",\"url\":\"https:\/\/monsterspost.com\/fr\/\",\"name\":\"TemplateMonster Blog France\",\"description\":\"Just another MonsterPost Sites site\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/fr\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#organization\",\"name\":\"MonsterPost France\",\"url\":\"https:\/\/monsterspost.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonsterPost France\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/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\/TemplateMonsterFrance\/\",\"https:\/\/twitter.com\/TM_France\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/4884946d097972046d54ec3b5524621c\",\"name\":\"Claire\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/db0976148c5793ad6317a44bd5f93582?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/db0976148c5793ad6317a44bd5f93582?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Claire\"},\"description\":\"Claire est une \u00e9crivaine talentueuse et curieuse. Sa principale priorit\u00e9 est de transmettre en termes simples des informations difficiles. Elle adore le monde de la conception Web et partage des trucs sympas sur sa page Facebook. Elle s'int\u00e9resse \u00e9galement activement \u00e0 la litt\u00e9rature, aux traductions et communique avec plaisir avec les abonn\u00e9s en ligne.\",\"url\":\"https:\/\/monsterspost.com\/fr\/author\/claire\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Faire des cases \u00e0 cocher \u00e9l\u00e9gantes et des boutons radio avec CSS3","description":"Nous connaissons tous les cases \u00e0 cocher et boutons radio HTML. La chose frustrante \u00e0 leur sujet, c'est qu'il n'y a pas moyen de changer leur apparence","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\/fr\/comment-faire-des-cases-a-cocher-elegantes-et-des-boutons-radio-avec-css3\/","og_locale":"fr_FR","og_type":"article","og_title":"Faire des cases \u00e0 cocher \u00e9l\u00e9gantes et des boutons radio avec CSS3","og_description":"Nous connaissons tous les cases \u00e0 cocher et boutons radio HTML. La chose frustrante \u00e0 leur sujet, c'est qu'il n'y a pas moyen de changer leur apparence","og_url":"https:\/\/monsterspost.com\/fr\/comment-faire-des-cases-a-cocher-elegantes-et-des-boutons-radio-avec-css3\/","og_site_name":"TemplateMonster Blog France","article_publisher":"https:\/\/www.facebook.com\/TemplateMonsterFrance\/","article_published_time":"2018-04-24T10:12:03+00:00","article_modified_time":"2020-05-21T10:59:59+00:00","og_image":[{"width":900,"height":538,"url":"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/04\/lap.jpg","type":"image\/jpeg"}],"author":"Claire","twitter_card":"summary_large_image","twitter_creator":"@TM_France","twitter_site":"@TM_France","twitter_misc":{"\u00c9crit par":"Claire","Dur\u00e9e de lecture estim\u00e9e":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/fr\/comment-faire-des-cases-a-cocher-elegantes-et-des-boutons-radio-avec-css3\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/fr\/comment-faire-des-cases-a-cocher-elegantes-et-des-boutons-radio-avec-css3\/"},"author":{"name":"Claire","@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/4884946d097972046d54ec3b5524621c"},"headline":"Comment faire des cases \u00e0 cocher \u00e9l\u00e9gantes et des boutons radio avec CSS3","datePublished":"2018-04-24T10:12:03+00:00","dateModified":"2020-05-21T10:59:59+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/fr\/comment-faire-des-cases-a-cocher-elegantes-et-des-boutons-radio-avec-css3\/"},"wordCount":769,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/fr\/#organization"},"keywords":["CSS3","HTML5"],"articleSection":["D\u00e9veloppement Web","Tutoriels"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/fr\/comment-faire-des-cases-a-cocher-elegantes-et-des-boutons-radio-avec-css3\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/fr\/comment-faire-des-cases-a-cocher-elegantes-et-des-boutons-radio-avec-css3\/","url":"https:\/\/monsterspost.com\/fr\/comment-faire-des-cases-a-cocher-elegantes-et-des-boutons-radio-avec-css3\/","name":"Faire des cases \u00e0 cocher \u00e9l\u00e9gantes et des boutons radio avec CSS3","isPartOf":{"@id":"https:\/\/monsterspost.com\/fr\/#website"},"datePublished":"2018-04-24T10:12:03+00:00","dateModified":"2020-05-21T10:59:59+00:00","description":"Nous connaissons tous les cases \u00e0 cocher et boutons radio HTML. La chose frustrante \u00e0 leur sujet, c'est qu'il n'y a pas moyen de changer leur apparence","breadcrumb":{"@id":"https:\/\/monsterspost.com\/fr\/comment-faire-des-cases-a-cocher-elegantes-et-des-boutons-radio-avec-css3\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/fr\/comment-faire-des-cases-a-cocher-elegantes-et-des-boutons-radio-avec-css3\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/fr\/comment-faire-des-cases-a-cocher-elegantes-et-des-boutons-radio-avec-css3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Comment faire des cases \u00e0 cocher \u00e9l\u00e9gantes et des boutons radio avec CSS3"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/fr\/#website","url":"https:\/\/monsterspost.com\/fr\/","name":"TemplateMonster Blog France","description":"Just another MonsterPost Sites site","publisher":{"@id":"https:\/\/monsterspost.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/fr\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/fr\/#organization","name":"MonsterPost France","url":"https:\/\/monsterspost.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonsterPost France"},"image":{"@id":"https:\/\/monsterspost.com\/fr\/#\/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\/TemplateMonsterFrance\/","https:\/\/twitter.com\/TM_France"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/4884946d097972046d54ec3b5524621c","name":"Claire","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/db0976148c5793ad6317a44bd5f93582?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/db0976148c5793ad6317a44bd5f93582?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Claire"},"description":"Claire est une \u00e9crivaine talentueuse et curieuse. Sa principale priorit\u00e9 est de transmettre en termes simples des informations difficiles. Elle adore le monde de la conception Web et partage des trucs sympas sur sa page Facebook. Elle s'int\u00e9resse \u00e9galement activement \u00e0 la litt\u00e9rature, aux traductions et communique avec plaisir avec les abonn\u00e9s en ligne.","url":"https:\/\/monsterspost.com\/fr\/author\/claire\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/posts\/559"}],"collection":[{"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/users\/1672325"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/comments?post=559"}],"version-history":[{"count":8,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/posts\/559\/revisions"}],"predecessor-version":[{"id":4345,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/posts\/559\/revisions\/4345"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/media\/565"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/media?parent=559"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/categories?post=559"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/tags?post=559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}