jeudi 16 avril 2020

How i can achieve input checkbox or radio button like this?

Good Day to all, Click to open image

Please kindly view that image, i want to achieve radio button or check box like that, it was on a website here : Link

in Above link if you choose Cheese Pizza Add > Medium > there you can find input buttons i am looking for.

My code :

<div class="boxes_area">
                <div class="main_content">
                    Extra Cheese
                </div>
                <div class="right_side">
                    <div class="right_half_icon_one">
                    </div>
                </div>
                <div class="left_side">
                    <div class="left_half_icon_one">
                    </div>
                </div>
                <div class="full_side">
                    <div class="full_circle">
                    </div>
                </div>
            </div>

With css i achieved :-

.right_side {
            border: 1px solid;
            border-radius: 50%;
            padding: 5px;
        }

        .modal .modal-header {
            border-bottom: 1px solid;
        }
        .modal .modal-footer {
            border-top: 1px solid;
        }
        .right_half_icon_one img {
            width: 35px;
        }
        .left_half_icon_one img {
            width: 35px;
        }
        .boxes_area {
            margin-top: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 5px;
        }
        .full_circle img {
            width: 35px;
        }
        .right_half_icon_one {
            width: 35px;
            height: 35px;
            background: #212a5e;
            border-radius: 100%;
            position: relative;
        }
        .right_half_icon_one::before{
            position: absolute;
            top: -1px;
            content: '';
            left: 18px;
            width: 18px;
            height: 37px;
            background: white;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        .left_side {
            border: 1px solid;
            padding: 5px;
            border-radius: 100%;
        }
        .left_half_icon_one {
            width: 35px;
            height: 35px;
            background: #212a5e;
            border-radius: 100%;
            position: relative;
        }
        .left_half_icon_one::before{
            position: absolute;
            top: -1px;
            content: '';
            right: 18px;
            width: 18px;
            height: 37px;
            background: white;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }
        .full_side {
            border: 1px solid;
            padding: 5px;
            border-radius: 100%;
        }
        .full_circle {
            width: 35px;
            height: 35px;
            background: #212a5e;
            border-radius: 50%;
        }

but i want those with input and radio box form elements, please help me to find.




Aucun commentaire:

Enregistrer un commentaire