当前位置：网站首页>Modify checkbox style

Modify checkbox style

2022-07-19 07:49:00 【guizi0809】

checkbox Default style

Take Google browser for example

    <div class="box">
      <input type="checkbox" /> Basketball  
      <input type="checkbox" /> football 
      <input type="checkbox" /> Table Tennis 
    </div>

Comes with default margin: 3px 3px 3px 4px

Insert picture description here
Default frame style

    width: 10px;
    height: 10px;
    border-radius: 2px;
    border: 1px solid rgb(118, 118, 118);
    box-sizing: border-box;

Insert picture description here

Style when selected
Insert picture description here

modify checkbox Default style

You can set the size and margin

      input[type="checkbox"] {
    
        width: 20px;
        height: 20px;
        margin: 0;
      }

Insert picture description here
Use appearance: none Hide default checkbox The frame of , Rewrite the frame style

principle ： Overwrite the original multi selection box by absolute positioning

      input[type="checkbox"] {
    
        width: 20px;
        height: 20px;
        margin: 0 4px 0 0;
        appearance: none;
        position: relative;
      }

Example 1 ：

	  /**  Unselected style */
      input[type="checkbox"]::before {
    
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background: #fff;
        width: 100%;
        height: 100%;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
      }
      /**  Selected styles  */
      input[type="checkbox"]:checked::before {
    
        content: "\2713";   /* 2713 Indicate tick * */
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 1px solid #7d7d7d;
        border-radius: 4px;
        color: #7d7d7d;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        line-height: 20px;
      }

design sketch ：
Insert picture description here
Example 2 ：

	   /**  Unselected style */
      input[type="checkbox"] {
    
        width: 20px;
        height: 20px;
        margin: 0 4px 0 0;
        appearance: none;
        position: relative;
        background: wheat;
        border-radius: 50%;
      }
      /**  Selected styles */
      input[type="checkbox"]:checked::before {
    
        content: "";
        background: orange;
        position: absolute;
        top: 25%;
        left: 25%;
        width: 50%;
        height: 50%;
        border: none;
        border-radius: 50%;
      }