N
N
nordwind20132018-07-30 15:49:57
css
nordwind2013, 2018-07-30 15:49:57

How to change the color of the active radio button?

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <link rel="stylesheet" href="StyleForRegistration.css">
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
    <button id="show-dialog" type="button" class="mdl-button">Show Dialog</button>
    <dialog class="mdl-cell mdl-cell--6-col mdl-cell--12-col-phone mdl-dialog">
        <h1 class="mdl-dialog__title registration-form-title">Registration</h1>
        <div class="mdl-dialog__content">
            <form action="#">

                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                    <input class="mdl-textfield__input" type="text">
                    <label class="mdl-textfield__label" for="sample3">Firstname</label>
                </div>

                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                    <input class="mdl-textfield__input" type="text">
                    <label class="mdl-textfield__label" for="sample3">Lastname</label>
                </div>

                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                    <input class="mdl-textfield__input" type="text">
                    <label class="mdl-textfield__label" for="sample3">Password</label>
                </div>

                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                    <input class="mdl-textfield__input" type="text">
                    <label class="mdl-textfield__label" for="sample3">Confirm password</label>
                </div>

                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                    <input class="mdl-textfield__input username-email" type="text">
                    <label class="mdl-textfield__label" for="sample3">Username</label>
                </div>

                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                    <input class="mdl-textfield__input username-email" type="text">
                    <label class="mdl-textfield__label" for="sample3">Email</label>
                </div>

                <div class="sex">

                    <label class="gender">Gender</label>
                    <div class="gender-radio-buttons">
                        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="gender-1">
                            <input type="radio" id="gender-1" class="mdl-radio__button" name="genders" value="1" checked>
                            <span class="mdl-radio__label">Male</span>
                        </label>
                    </div>
                    
                    <div class="gender-radio-buttons">
                        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="gender-2">
                            <input type="radio" id="gender-2" class="mdl-radio__button" name="genders" value="2">
                            <span class="mdl-radio__label">Female</span>
                        </label>
                    </div>
                    
                    <div class="gender-radio-buttons">
                        <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="gender-3">
                            <input type="radio" id="gender-3" class="mdl-radio__button" name="genders" value="3">
                            <span class="mdl-radio__label">Other</span>
                        </label>
                    </div>
                </div>

            </form>
        </div>

        <div class="mdl-dialog__actions">
            <button type="button" class="mdl-button">Agree</button>
        </div>
    </dialog>
    <script>
        var dialog = document.querySelector('dialog');
        var showDialogButton = document.querySelector('#show-dialog');
        if (!dialog.showModal) {
            dialogPolyfill.registerDialog(dialog);
        }
        showDialogButton.addEventListener('click', function () {
            dialog.showModal();
        });
        dialog.querySelector('.close').addEventListener('click', function () {
            dialog.close();
        });
    </script>
</body>
</html>
3fvN2wZ5_Dc.jpg

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Andrej Sharapov, 2018-07-30
@Madeas

input:checked+span {
  color: rgb(63,81,181);
}

0
0xD34F, 2019-07-05
@0xD34F

What part of the button are you talking about? There are three different elements there.
The circle representing the button:

.mdl-radio .mdl-radio__button:checked ~ .mdl-radio__outer-circle {
  border-color: red;
}

Marker indicating the active button:
.mdl-radio .mdl-radio__button:checked ~ .mdl-radio__inner-circle {
  background-color: orange;
}

Text:
.mdl-radio .mdl-radio__button:checked ~ .mdl-radio__label {
  color: blue;
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question