Как изменит цвет радиокнопки?

144
04 октября 2018, 03:40

<!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>

READ ALSO
C# SslCredentials и защита данных при использовании gRPC
c#

C# SslCredentials и защита данных при использовании gRPC

При использовании gRPC (новая технология от google, которая по своей сути является следующим витком развития REST) пытаюсь использовать root certificate...

 192
Сохранение файлов Cookies в ChromiumWebBrowser
c#

Сохранение файлов Cookies в ChromiumWebBrowser

При установке значения CefSettingsCachePath я логично наблюдаю появление в указанной директории кучи файлов представляющих разные журналы логирования...

 172
Поле, подобное chekedlistbox
c#

Поле, подобное chekedlistbox

Нужно создать поле, подобное checkedlistbox, но с возможностью пользователя изменять в нем текстКак это сделать без большого количества дополнительных...

 164
C помощью Linq не могу получить правильную выборку
c#

C помощью Linq не могу получить правильную выборку

Есть следующая задачаНужно выбрать из данной таблицы следующее:

 167