Colored radio button

HTML

CSS

Output

HTML Copied

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <title>Colored radio buttons</title>
</head>

<body>
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="mainDiv">
                <div class="container">
                    <h1 class="rangeSliderHeading">Colored radio buttons</span></h1>
                    <div class="divider"></div>
                    <div class="flex-container">
                        <form name="colorSelectorForm">
                            <input type="radio" name="colorSelector" id="radio-pink" value="pink" />
                            <label for="radio-pink"><i class="material-icons">color_lens</i>Pink</label>
                            <input type="radio" name="colorSelector" id="radio-indigo" value="indigo" />
                            <label for="radio-indigo"><i class="material-icons">color_lens</i>Indigo</label>
                            <input type="radio" name="colorSelector" id="radio-cyan" value="cyan" />
                            <label for="radio-cyan"><i class="material-icons">color_lens</i>Cyan</label>
                            <input type="radio" name="colorSelector" id="radio-teal" value="teal" checked />
                            <label for="radio-teal"><i class="material-icons">color_lens</i>Teal</label>
                            <input type="radio" name="colorSelector" id="radio-lime" value="lime" />
                            <label for="radio-lime"><i class="material-icons">color_lens</i>Lime</label>
                            <input type="radio" name="colorSelector" id="radio-deep-orange" value="deep_orange" />
                            <label for="radio-deep-orange"><i class="material-icons">color_lens</i>Deep Orange</label>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

CSS Copied

body {
            overflow: hidden;
        }
        .mainDiv {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .container {
            position: relative;
            margin: auto;
            width: 700px;
            height: fit-content;
            padding: 10px 20px 20px 20px;
            background-color: #fff;
            border: 2px solid #e0dfdf;
            border-radius: 25px;
        }
        .rangeSliderHeading {
            color: rgb(6, 2, 114);
            border-bottom: 1px solid rgb(180, 180, 180);
            padding-bottom: 1rem;
            text-align: center;
        }
        
        .flex-container {
            width: 100%;
            min-height: fit-content;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding: 20px 0;
        }
        i {
            display: inline;
            vertical-align: middle;
        }
        /* Radio Button */
        input[type="radio"] {
            position: relativ;
            display: none;
        }
        input[type="radio"]+label {
                        margin: 8px;
            padding: 10px;
            border-radius: 25px;
            position: relative;
        }
        input[type="radio"]#radio-pink+label {
            background-color: #FCE4EC80;
            color: #E91E63;
        }
        input[type="radio"]#radio-indigo+label {
            background-color: #E8EAF680;
            color: #3F51B5;
        }
        input[type="radio"]#radio-cyan+label {
            background-color: #E0F7FA80;
            color: #00BCD4;
        }
        input[type="radio"]#radio-teal+label {
            background-color: #E0F2F180;
            color: #009688;
        }
        input[type="radio"]#radio-lime+label {
            background-color: #F9FBE780;
            color: #CDDC39;
        }
        input[type="radio"]#radio-deep-orange+label {
            background-color: #FBE9E780;
            color: #FF5722;
        }
        
        /*hover, checked, focus*/
        input[type="radio"]#radio-pink:hover+label,
        input[type="radio"]#radio-pink:checked+label,
        input[type="radio"]#radio-pink:focus+label {
            cursor: pointer;
            background-color: #E91E63;
            color: #FFFFFF;
        }
        input[type="radio"]#radio-indigo:hover+label,
        input[type="radio"]#radio-indigo:checked+label,
        input[type="radio"]#radio-indigo:focus+label {
            cursor: pointer;
            background-color: #3F51B5;
            color: #FFFFFF;
        }
        input[type="radio"]#radio-cyan:hover+label,
        input[type="radio"]#radio-cyan:checked+label,
        input[type="radio"]#radio-cyan:focus+label {
            cursor: pointer;
            background-color: #00BCD4;
            color: #FFFFFF;
        }
        input[type="radio"]#radio-teal:hover+label,
        input[type="radio"]#radio-teal:checked+label,
        input[type="radio"]#radio-teal:focus+label {
            cursor: pointer;
            background-color: #009688;
            color: #FFFFFF;
        }
        input[type="radio"]#radio-lime:hover+label,
        input[type="radio"]#radio-lime:checked+label,
        input[type="radio"]#radio-lime:focus+label {
            cursor: pointer;
            background-color: #CDDC39;
            color: #FFFFFF;
        }
        input[type="radio"]#radio-deep-orange:hover+label,
        input[type="radio"]#radio-deep-orange:checked+label,
        input[type="radio"]#radio-deep-orange:focus+label {
            cursor: pointer;
            background-color: #FF5722;
            color: #FFFFFF;
        }

Colored radio button

JS Copied

Output