CSS changes the style of the checkbox

A check box:

With text:

The color of the check box, and the color of the tick, can be changed.

HTML code structure:

<span><input type= "checkbox" id= "Questionno" onchange= "Togglequestionno ()" ><label for= "QuestionNo" ></label></span>

CSS code:

 /* #region checkbox Style */span {position:relative;
        Display:block;
        /*margin:20px 100px;*/} span input {display:none; The span label {/*label label is used for the Click event and the box style for the check boxes we want to define.
            */padding-left:25px;
            Cursor:pointer;
            Position:absolute;
            height:25px;
            top:0;
            left:0;      /*width:30px;
            If there is no text, open this style background: #eee; border:1px solid #ddd; */* Create a checkmark in the box, for this we can use: after pseudo class to create a new element, in order to implement this style, we can create a 5px x 9px rectangle and give
        He added a border. When we remove the top and right border, it will look like a letter L. Then we can use the CSS's Transform property to rotate it so that it looks like a tick.
                */span Label::after {content: '; opacity:0.2;
                /* Set check box label transparency 0.2, translucent hook below hover time to deepen */position:absolute;
                width:9px;
                height:5px;
                Background:transparent;
         top:6px;       left:7px;
                BORDER:3PX solid #333;
                Border-top:none;
                Border-right:none;
                -webkit-transform:rotate ( -45DEG);
                -moz-transform:rotate ( -45DEG);
                -o-transform:rotate ( -45DEG);
                -ms-transform:rotate ( -45DEG);
            Transform:rotate ( -45DEG);
    } label:hover::after {opacity:0.5;
    } input[type=checkbox]:checked + Label:after {/*checkbox is selected, set adjacent element pairs to be opaque */opacity:1; }/* #endregion */

The radio buttons are the same, setting the rounded corners of the border border-radius:50%;