{"id":455,"date":"2023-05-08T17:17:52","date_gmt":"2023-05-08T15:17:52","guid":{"rendered":"https:\/\/baltazorius.fr\/?p=455"},"modified":"2023-05-18T06:45:46","modified_gmt":"2023-05-18T04:45:46","slug":"personnaliser-input-typecheckbox","status":"publish","type":"post","link":"https:\/\/baltazorius.fr\/index.php\/2023\/05\/08\/personnaliser-input-typecheckbox\/","title":{"rendered":"Personnaliser  [ input type=\u00a0\u00bbcheckbox\u00a0\u00bb ]"},"content":{"rendered":"\n<p><strong>&lt;input&gt;<\/strong> \u00e9l\u00e9ments de type <strong>checkbox<\/strong> sont rendus par d\u00e9faut sous forme de cases qui sont coch\u00e9es lorsqu\u2019elles sont activ\u00e9es, comme vous pourriez le voir dans un formulaire. L\u2019apparence exacte d\u00e9pend de la configuration du syst\u00e8me d\u2019exploitation sous lequel le navigateur s\u2019ex\u00e9cute. G\u00e9n\u00e9ralement, il s\u2019agit d\u2019un carr\u00e9, mais il peut avoir des coins arrondis. Une case \u00e0 cocher vous permet de s\u00e9lectionner des valeurs uniques \u00e0 soumettre dans un formulaire (ou non).<\/p>\n\n\n\n<html>\n  <head>\n\t<style type=\"text\/css\">\np,\nlabel {\n    font: 1rem 'Fira Sans', sans-serif;\n}\n\ninput {\n    margin: 0.4rem;\n}\n\t<\/style>\n  <\/head>\n<body>\n<fieldset>\n    <legend>D\u00e9mo d&rsquo;un checkbox :<\/legend>\n\n    <div>\n      <input type=\"checkbox\" id=\"scales\" name=\"scales\" checked>\n      <label for=\"scales\">Scales<\/label>\n    <\/div>\n\n    <div>\n      <input type=\"checkbox\" id=\"horns\" name=\"horns\">\n      <label for=\"horns\">Horns<\/label>\n    <\/div>\n<\/fieldset>\n<\/body>\n<\/html>\n\n\n<div class=\"wp-block-wab-pastacode\">\n\t<div class=\"code-embed-wrapper\"> <pre class=\"language-markup code-embed-pre\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;html&gt;<br\/>  &lt;head&gt;<br\/>\t&lt;style type=&quot;text\/css&quot;&gt;<br\/>p,<br\/>label {<br\/>    font: 1rem &#039;Fira Sans&#039;, sans-serif;<br\/>}<br\/><br\/>input {<br\/>    margin: 0.4rem;<br\/>}<br\/>\t&lt;\/style&gt;<br\/>  &lt;\/head&gt;<br\/>&lt;body&gt;<br\/>&lt;fieldset&gt;<br\/>    &lt;legend&gt;D\u00e9mo d&#039;un checkbox :&lt;\/legend&gt;<br\/><br\/>    &lt;div&gt;<br\/>      &lt;input type=&quot;checkbox&quot; id=&quot;scales&quot; name=&quot;scales&quot; checked&gt;<br\/>      &lt;label for=&quot;scales&quot;&gt;Scales&lt;\/label&gt;<br\/>    &lt;\/div&gt;<br\/><br\/>    &lt;div&gt;<br\/>      &lt;input type=&quot;checkbox&quot; id=&quot;horns&quot; name=&quot;horns&quot;&gt;<br\/>      &lt;label for=&quot;horns&quot;&gt;Horns&lt;\/label&gt;<br\/>    &lt;\/div&gt;<br\/>&lt;\/fieldset&gt;<br\/>&lt;\/body&gt;<br\/>&lt;\/html&gt;<\/code><\/pre> <div class=\"code-embed-infos\"> <\/div> <\/div><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<html>\n  <head>\n\t<style type=\"text\/css\">\np,\nlabel {\n    font: 1rem 'Fira Sans', sans-serif;\n}\n\ninput {\n    margin: 0.4rem;\n}\n#scales1 {\n    accent-color:#2c7c72;\n}\n#horns1 {\n    accent-color:#2c7c72;\n}\n\t<\/style>\n  <\/head>\n<body>\n<fieldset>\n    <legend>D\u00e9mo couleur modifier d&rsquo;un checkbox :<\/legend>\n\n    <div>\n      <input type=\"checkbox\" id=\"scales1\" name=\"scales\" checked>\n      <label for=\"scales1\">Scales<\/label>\n    <\/div>\n\n    <div>\n      <input type=\"checkbox\" id=\"horns1\" name=\"horns\">\n      <label for=\"horns1\">Horns<\/label>\n    <\/div>\n<\/fieldset>\n<\/body>\n<\/html>\n\n\n<div class=\"wp-block-wab-pastacode\">\n\t<div class=\"code-embed-wrapper\"> <pre class=\"language-markup code-embed-pre\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;html&gt;<br\/>  &lt;head&gt;<br\/>\t&lt;style type=&quot;text\/css&quot;&gt;<br\/>p,<br\/>label {<br\/>    font: 1rem &#039;Fira Sans&#039;, sans-serif;<br\/>}<br\/><br\/>input {<br\/>    margin: 0.4rem;<br\/>    accent-color:#2c7c72;<br\/>}<br\/>\t&lt;\/style&gt;<br\/>  &lt;\/head&gt;<br\/>&lt;body&gt;<br\/>&lt;fieldset&gt;<br\/>    &lt;legend&gt;D\u00e9mo d&#039;un checkbox :&lt;\/legend&gt;<br\/><br\/>    &lt;div&gt;<br\/>      &lt;input type=&quot;checkbox&quot; id=&quot;scales&quot; name=&quot;scales&quot; checked&gt;<br\/>      &lt;label for=&quot;scales&quot;&gt;Scales&lt;\/label&gt;<br\/>    &lt;\/div&gt;<br\/><br\/>    &lt;div&gt;<br\/>      &lt;input type=&quot;checkbox&quot; id=&quot;horns&quot; name=&quot;horns&quot;&gt;<br\/>      &lt;label for=&quot;horns&quot;&gt;Horns&lt;\/label&gt;<br\/>    &lt;\/div&gt;<br\/>&lt;\/fieldset&gt;<br\/>&lt;\/body&gt;<br\/>&lt;\/html&gt;<\/code><\/pre> <div class=\"code-embed-infos\"> <\/div> <\/div><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<html>\n  <head>\n\t<style type=\"text\/css\">\n    #check {\n      margin-right: 6px;\n    }\n    label {\n      font-weight: 500;\n      color: #333;\n      cursor: pointer;\n    }\n    #check:checked {\n      accent-color: #7d2ae8;\n    }\n    #check:checked ~ label {\n      color: #7d2ae8\n    }\n\t<\/style>\n  <\/head>\n<body>\n<fieldset>\n    <legend>D\u00e9mo d&rsquo;un checkbox et label color\u00e9s une fois la case coch\u00e9es:<\/legend>\n\n<input type=\"checkbox\" id=\"check\" \/>\n<label for=\"check\">Checkbox<\/label>\n\n<\/fieldset>\n<\/body>\n<\/html>\n\n\n<div class=\"wp-block-wab-pastacode\">\n\t<div class=\"code-embed-wrapper\"> <pre class=\"language-markup code-embed-pre\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;html&gt;<br\/>  &lt;head&gt;<br\/>\t&lt;style type=&quot;text\/css&quot;&gt;<br\/>    #check {<br\/>      margin-right: 6px;<br\/>    }<br\/>    label {<br\/>      font-weight: 500;<br\/>      color: #333;<br\/>      cursor: pointer;<br\/>    }<br\/>    #check:checked {<br\/>      accent-color: #7d2ae8;<br\/>    }<br\/>    #check:checked ~ label {<br\/>      color: #7d2ae8<br\/>    }<br\/>\t&lt;\/style&gt;<br\/>  &lt;\/head&gt;<br\/>&lt;body&gt;<br\/>&lt;fieldset&gt;<br\/>    &lt;legend&gt;D\u00e9mo d&#039;un checkbox et label color\u00e9s une fois la case coch\u00e9es:&lt;\/legend&gt;<br\/><br\/>&lt;input type=&quot;checkbox&quot; id=&quot;check&quot; \/&gt;<br\/>&lt;label for=&quot;check&quot;&gt;Checkbox&lt;\/label&gt;<br\/><br\/>&lt;\/fieldset&gt;<br\/>&lt;\/body&gt;<br\/>&lt;\/html&gt;<\/code><\/pre> <div class=\"code-embed-infos\"> <\/div> <\/div><\/div>\n<p>Views: 844<\/p>","protected":false},"excerpt":{"rendered":"<p>&lt;input&gt; \u00e9l\u00e9ments de type checkbox sont rendus par d\u00e9faut sous forme de cases qui sont coch\u00e9es lorsqu\u2019elles sont activ\u00e9es, comme vous pourriez le voir dans un formulaire. L\u2019apparence exacte d\u00e9pend de la configuration du syst\u00e8me d\u2019exploitation sous lequel le navigateur s\u2019ex\u00e9cute. G\u00e9n\u00e9ralement, il s\u2019agit d\u2019un carr\u00e9, mais il peut avoir des coins arrondis. Une case &#8230; <a href=\"https:\/\/baltazorius.fr\/index.php\/2023\/05\/08\/personnaliser-input-typecheckbox\/\" class=\"more-link\">En savoir plus<span class=\"screen-reader-text\"> \u00ab\u00a0Personnaliser  [ input type=\u00a0\u00bbcheckbox\u00a0\u00bb ]\u00a0\u00bb<\/span> &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-455","post","type-post","status-publish","format-standard","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/baltazorius.fr\/index.php\/wp-json\/wp\/v2\/posts\/455","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/baltazorius.fr\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/baltazorius.fr\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/baltazorius.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/baltazorius.fr\/index.php\/wp-json\/wp\/v2\/comments?post=455"}],"version-history":[{"count":13,"href":"https:\/\/baltazorius.fr\/index.php\/wp-json\/wp\/v2\/posts\/455\/revisions"}],"predecessor-version":[{"id":553,"href":"https:\/\/baltazorius.fr\/index.php\/wp-json\/wp\/v2\/posts\/455\/revisions\/553"}],"wp:attachment":[{"href":"https:\/\/baltazorius.fr\/index.php\/wp-json\/wp\/v2\/media?parent=455"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/baltazorius.fr\/index.php\/wp-json\/wp\/v2\/categories?post=455"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/baltazorius.fr\/index.php\/wp-json\/wp\/v2\/tags?post=455"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}