How to style a checkbox using CSS

前端 未结 30 3510
日久生厌
日久生厌 2020-11-21 04:26

I am trying to style a checkbox using the following:

30条回答
  •  情话喂你
    2020-11-21 05:14

    Before you begin (as of Jan 2015)

    The original question and answer are now ~5 years old. As such, this is a little bit of an update.

    Firstly, there are a number of approaches when it comes to styling checkboxes. the basic tenet is:

    1. You will need to hide the default checkbox control which is styled by your browser, and cannot be overridden in any meaningful way using CSS.

    2. With the control hidden, you will still need to be able to detect and toggle its checked state

    3. The checked state of the checkbox will need to be reflected by styling a new element

    The solution (in principle)

    The above can be accomplished by a number of means - and you will often hear using CSS3 pseudo-elements is the right way. Actually, there is no real right or wrong way, it depends on the approach most suitable for the context you will be using it in. That said, I have a preferred one.

    1. Wrap your checkbox in a label element. This will mean that even when it is hidden, you can still toggle its checked state on clicking anywhere within the label.

    2. Hide your checkbox

    3. Add a new element after the checkbox which you will style accordingly. It must appear after the checkbox so it can be selected using CSS and styled dependent on the :checked state. CSS cannot select 'backwards'.

    The solution (in code)

    label input {
      visibility: hidden;/* <-- Hide the default checkbox. The rest is to hide and allow tabbing, which display:none prevents */
      display: block;
      height: 0;
      width: 0;
      position: absolute;
      overflow: hidden;
    }
    label span {/* <-- Style the artificial checkbox */
      height: 10px;
      width: 10px;
      border: 1px solid grey;
      display: inline-block;
    }
    [type=checkbox]:checked + span {/* <-- Style its checked state */
      background: black;
    }

    Refinement (using icons)

    But hey! I hear you shout. What about if I want to show a nice little tick or cross in the box? And I don't want to use background images!

    Well, this is where CSS3's pseudo-elements can come into play. These support the content property which allows you to inject Unicode icons representing either state. Alternatively, you could use a third party font icon source such as font awesome (though make sure you also set the relevant font-family, e.g. to FontAwesome)

    label input {
      display: none; /* Hide the default checkbox */
    }
    
    /* Style the artificial checkbox */
    label span {
      height: 10px;
      width: 10px;
      border: 1px solid grey;
      display: inline-block;
      position: relative;
    }
    
    /* Style its checked state...with a ticked icon */
    [type=checkbox]:checked + span:before {
      content: '\2714';
      position: absolute;
      top: -5px;
      left: 0;
    }

提交回复
热议问题