Материализация CSS-браузера по умолчанию для радиовхода - PullRequest
Новая
       20

Материализация CSS-браузера по умолчанию для радиовхода

0 голосов
/ 21 октября 2019

Я хочу использовать радиовход по умолчанию в браузере вместо материализации нестандартного радиовхода css. Как это сделать?

Эта строка кодов будет автоматически использовать материализованный пользовательский радиовход css вместо браузера по умолчанию: 

<label>
    <input name="pay-type" value="mc" type="radio" checked />
    <span>Emoney</span>
</label>

Ответы [ 3 ]

0 голосов
/ 22 октября 2019

Вы можете использовать этот код 

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>index</title>
  <style type="text/css">
    html,
    body {
      height: 100%;
    }
    
    body {
      background: #e6e6e6;
      font-family: 'Source Sans Pro', sans-serif;
    }
    
    .container {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
    
    .control-group {
      display: inline-block;
      vertical-align: top;
      background: #fff;
      text-align: left;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      padding: 20px;
      width: 180px;
      height: 180px;
      margin: 10px;
    }
    
    .control {
      display: block;
      position: relative;
      padding-left: 30px;
      margin-bottom: 15px;
      cursor: pointer;
      font-size: 18px;
    }
    
    .control input {
      position: absolute;
      z-index: -1;
      opacity: 0;
    }
    
    .control__indicator {
      position: absolute;
      top: 2px;
      left: 0;
      height: 20px;
      width: 20px;
      background: #e6e6e6;
    }
    
    .control--radio .control__indicator {
      border-radius: 50%;
    }
    
    .control:hover input~.control__indicator,
    .control input:focus~.control__indicator {
      background: #ccc;
    }
    
    .control input:checked~.control__indicator {
      background: #2aa1c0;
    }
    
    .control:hover input:not([disabled]):checked~.control__indicator,
    .control input:checked:focus~.control__indicator {
      background: #0e647d;
    }
    
    .control__indicator:after {
      content: '';
      position: absolute;
      display: none;
    }
    
    .control input:checked~.control__indicator:after {
      display: block;
    }
    
    .control--checkbox .control__indicator:after {
      left: 8px;
      top: 4px;
      width: 3px;
      height: 8px;
      border: solid #fff;
      border-width: 0 2px 2px 0;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    
    .control--radio .control__indicator:after {
      left: 7px;
      top: 7px;
      height: 6px;
      width: 6px;
      border-radius: 50%;
      background: #fff;
    }
    
    .select {
      position: relative;
      display: inline-block;
      margin-bottom: 15px;
      width: 100%;
    }
    
    .select select {
      display: inline-block;
      width: 100%;
      cursor: pointer;
      padding: 10px 15px;
      outline: 0;
      border: 0;
      border-radius: 0;
      background: #e6e6e6;
      color: #7b7b7b;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
    }
    
    .select select::-ms-expand {
      display: none;
    }
    
    .select select:hover,
    .select select:focus {
      color: #000;
      background: #ccc;
    }
    
    .select__arrow {
      position: absolute;
      top: 16px;
      right: 15px;
      width: 0;
      height: 0;
      pointer-events: none;
      border-style: solid;
      border-width: 8px 5px 0 5px;
      border-color: #7b7b7b transparent transparent transparent;
    }
    
    .select select:hover~.select__arrow,
    .select select:focus~.select__arrow {
      border-top-color: #000;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="control-group">
      <label class="control control--radio">First radio
                <input type="radio" name="radio" checked="checked" />
                <div class="control__indicator"></div>
            </label>
      <label class="control control--radio">Second radio
                <input type="radio" name="radio" />
                <div class="control__indicator"></div>
            </label>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>
0 голосов
/ 22 октября 2019
0 голосов
/ 21 октября 2019

Так как вы используете Materialize CSS и стиль применяется ко всем элементам на странице. Вы можете создать собственный класс для этого конкретного элемента ввода и применить к нему класс браузера по умолчанию. 

<label>
    <input class="custom" name="pay-type" value="mc" type="radio" checked />
    <span>Emoney</span>
</label>

.custom {
    background-color: initial;
    cursor: default;
    -webkit-appearance: radio;
    box-sizing: border-box;
    margin: 3px 3px 0px 5px;
    padding: initial;
    border: initial;
}

Попробуйте это и дайте мне знать, если это работает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...