• <kbd id="sucug"></kbd>
    技術頻道導航
    HTML/CSS
    .NET技術
    IIS技術
    PHP技術
    Js/JQuery
    Photoshop
    Fireworks
    服務器技術
    操作系統
    網站運營

    贊助商

    分類目錄

    贊助商

    最新文章

    搜索

    兩例純CSS樣式:單選radio/復選checkbox按鈕

    作者:admin    時間:2022-12-5 16:37:12    瀏覽:

    本文介紹兩例純CSS樣式:單選radio/復選checkbox按鈕。

    1、單選(radio)按鈕


    單選(radio)按鈕

    demodownload

    完整HTML代碼

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
    :root {
      --form-control-color: rebeccapurple;
    }

    *,
    *:before,
    *:after {
      box-sizing: border-box;
    }

    body {
      margin: 0;
    }

    form {
      display: grid;
      place-content: center;
      min-height: 100vh;
    }

    .form-control {
      font-family: system-ui, sans-serif;
      font-size: 2rem;
      font-weight: bold;
      line-height: 1.1;
      display: grid;
      grid-template-columns: 1em auto;
      gap: 0.5em;
    }

    .form-control + .form-control {
      margin-top: 1em;
    }

    .form-control:focus-within {
      color: var(--form-control-color);
    }

    input[type=radio] {
      /* Add if not using autoprefixer */
      -webkit-appearance: none;
      /* Remove most all native input styles */
      -moz-appearance: none;
           appearance: none;
      /* For iOS < 15 */
      background-color: var(--form-background);
      /* Not removed via appearance */
      margin: 0;
      font: inherit;
      color: currentColor;
      width: 1.15em;
      height: 1.15em;
      border: 0.15em solid currentColor;
      border-radius: 50%;
      transform: translateY(-0.075em);
      display: grid;
      place-content: center;
    }

    input[type=radio]::before {
      content: "";
      width: 0.65em;
      height: 0.65em;
      border-radius: 50%;
      transform: scale(0);
      transition: 120ms transform ease-in-out;
      box-shadow: inset 1em 1em var(--form-control-color);
      /* Windows High Contrast Mode */
      background-color: CanvasText;
    }

    input[type=radio]:checked::before {
      transform: scale(1);
    }

    input[type=radio]:focus {
      outline: max(2px, 0.15em) solid currentColor;
      outline-offset: max(2px, 0.15em);
    }
    </style>

    </head>

    <body translate="no" >
      <form action="">
      <label class="form-control">
        <input type="radio" name="radio" />
        Radio
      </label>

      <label class="form-control">
        <input type="radio" name="radio" checked />
        Radio - checked
      </label>
    </form>

    </body>

    </html>

    代碼解釋

    1、未選中狀態的CSS

    input[type="radio"] {
      appearance: none;
      background-color: #fff;
      margin: 0;
      font: inherit;
      color: currentColor;
      width: 1.15em;
      height: 1.15em;
      border: 0.15em solid currentColor;
      border-radius: 50%;
      transform: translateY(-0.075em);
    }

    2、checked狀態的CSS

    input[type="radio"] {
      /* ...existing styles */
      display: grid;
      place-content: center;
    }

    input[type="radio"]::before {
      content: "";
      width: 0.65em;
      height: 0.65em;
      border-radius: 50%;
      transform: scale(0);
      transition: 120ms transform ease-in-out;
      box-shadow: inset 1em 1em var(--form-control-color);
    }

    input[type="radio"]:checked::before {
      transform: scale(1);
    }

    3、:focus狀態的CSS

    input[type="radio"]:focus {
      outline: max(2px, 0.15em) solid currentColor;
      outline-offset: max(2px, 0.15em);
    }

    2、復選(checkbox)按鈕


    復選(checkbox)按鈕

    demodownload

    完整HTML代碼

    <!DOCTYPE html>
    <html>

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
    :root {
      --form-control-color: rebeccapurple;
      --form-control-disabled: #959495;
    }

    *,
    *:before,
    *:after {
      box-sizing: border-box;
    }

    body {
      margin: 0;
    }

    form {
      display: grid;
      place-content: center;
      min-height: 100vh;
    }

    .form-control {
      font-family: system-ui, sans-serif;
      font-size: 2rem;
      font-weight: bold;
      line-height: 1.1;
      display: grid;
      grid-template-columns: 1em auto;
      gap: 0.5em;
    }

    .form-control + .form-control {
      margin-top: 1em;
    }

    .form-control--disabled {
      color: var(--form-control-disabled);
      cursor: not-allowed;
    }

    input[type=checkbox] {
      /* Add if not using autoprefixer */
      -webkit-appearance: none;
      /* Remove most all native input styles */
      -moz-appearance: none;
           appearance: none;
      /* For iOS < 15 */
      background-color: var(--form-background);
      /* Not removed via appearance */
      margin: 0;
      font: inherit;
      color: currentColor;
      width: 1.15em;
      height: 1.15em;
      border: 0.15em solid currentColor;
      border-radius: 0.15em;
      transform: translateY(-0.075em);
      display: grid;
      place-content: center;
    }

    input[type=checkbox]::before {
      content: "";
      width: 0.65em;
      height: 0.65em;
      -webkit-clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
              clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
      transform: scale(0);
      transform-origin: bottom left;
      transition: 120ms transform ease-in-out;
      box-shadow: inset 1em 1em var(--form-control-color);
      /* Windows High Contrast Mode */
      background-color: CanvasText;
    }

    input[type=checkbox]:checked::before {
      transform: scale(1);
    }

    input[type=checkbox]:focus {
      outline: max(2px, 0.15em) solid currentColor;
      outline-offset: max(2px, 0.15em);
    }

    input[type=checkbox]:disabled {
      --form-control-color: var(--form-control-disabled);
      color: var(--form-control-disabled);
      cursor: not-allowed;
    }
    </style>

    </head>

    <body>

      <form action="">
      <label class="form-control">
        <input type="checkbox" name="checkbox" />
        Checkbox
      </label>

      <label class="form-control">
        <input type="checkbox" name="checkbox-checked" checked />
        Checkbox - checked
      </label>

      <label class="form-control form-control--disabled">
        <input type="checkbox" name="checkbox-disabled" disabled />
        Checkbox Disabled
      </label>

      <label class="form-control form-control--disabled">
        <input type="checkbox" name="checkbox-disabled-checked" checked disabled />
        Checkbox Disabled - checked
      </label>
     </form>

    </body>

    </html>

    代碼解釋

    1、未選中狀態的CSS

    input[type="checkbox"] {
      appearance: none;
      background-color: #fff;
      margin: 0;
      font: inherit;
      color: currentColor;
      width: 1.15em;
      height: 1.15em;
      border: 0.15em solid currentColor;
      border-radius: 0.15em;
      transform: translateY(-0.075em);
    }

    .form-control + .form-control {
      margin-top: 1em;
    }

     

    2、選中(checked)狀態的CSS

    input[type="checkbox"] {
      /* ...existing styles */
      display: grid;
      place-content: center;
    }

    input[type="checkbox"]::before {
      content: "";
      width: 0.65em;
      height: 0.65em;
      transform: scale(0);
      transition: 120ms transform ease-in-out;
      box-shadow: inset 1em 1em var(--form-control-color);
    }

    input[type="checkbox"]:checked::before {
      transform: scale(1);
    }

     

    3、創建帶有剪輯路徑的選中標記

    input[type="checkbox"]::before {
      /* ...existing styles */

      transform-origin: bottom left;
      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    }

     

    4、:focus狀態的CSS

    input[type="checkbox"]:focus {
      outline: max(2px, 0.15em) solid currentColor;
      outline-offset: max(2px, 0.15em);
    }

     

    5、:disabled狀態的CSS

    :root {
      --form-control-disabled: #959495;
    }

    input[type="checkbox"]:disabled {
      --form-control-color: var(--form-control-disabled);

      color: var(--form-control-disabled);
      cursor: not-allowed;
    }
    .form-control--disabled {
      color: var(--form-control-disabled);
      cursor: not-allowed;
    }

     

    總結

    本文介紹了兩例純CSS樣式:單選radio/復選checkbox按鈕,演示了如何使用額外的元素來達到預期的效果。

    相關文章

    標簽: css  radio  checkbox  
    x
    • 站長推薦
    国产成年女人人AA人视频看看-婷婷黄色视频-一女被两男吃奶添下A片免费-欧美黑人又粗又大高潮喷水