Переключатель переключения css выглядит как флажок - PullRequest
Новая
       10

Переключатель переключения css выглядит как флажок

0 голосов
/ 29 апреля 2019

Я пытаюсь реализовать этот пример: https://mdbootstrap.com/snippets/jquery/bartek-malanowski/517057

Однако, похоже, что файлы CSS из mdboostrap не загружаются:

result

Iимпортировал ссылки CSS и JS mdboostrap, и у меня есть собственный файл CSS с пользовательским CSS, но он не работает ... Не могли бы вы помочь мне, пожалуйста?Спасибо 

<!DOCTYPE html>
    <html lang="en">
        <head>
           <meta charset="utf-8">

           <!-- Bootstrap core CSS -->
           <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

           <!-- Material Design Bootstrap -->
           <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.0/css/mdb.min.css" rel="stylesheet">

           <!-- Custom CSS -->
           <link rel="stylesheet" href="css/Custom.css">

           <!-- JQuery -->
           <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>


          <!-- Bootstrap tooltips -->
          <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>

          <!-- Bootstrap core JavaScript -->
          <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

         <!-- MDB core JavaScript -->
         <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.0/js/mdb.min.js"></script>
      </head>
      <body>

      <div class="container"><br/>
         <div class="col-lg-8 m-auto d-block">

            <!-- Switch -->
            <div class="p-5">
                <div class="switch switch-info">
                    <label>
                    Off
                        <input type="checkbox">
                        <span class="lever"></span> On
                    </label>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

И файл CSS: 

/* Switch info */
.switch-info label input[type=checkbox]:checked+.lever {
   background-color: #33b5e5;
}

.switch-info label input[type=checkbox]:checked+.lever:after {
   background-color: #0099CC;
}

1 Ответ

0 голосов
/ 29 апреля 2019

Используйте следующий код: -

HTML - 

<label class="custom-control custom-checkbox"><span>Grayscale:</span>
      <input type="checkbox" id="grayscale" class="custom-control-input">
      <span class="custom-control-indicator"></span>
</label>

CSS - 

/*-------------------------------------------------- Custom Check Box -----------------------------------------------------------------------*/
.custom-control-input {
    display: none;
}

.custom-checkbox {
    min-height: 1rem;
    padding-left: 0;
    margin-right: 0;
    cursor: pointer;
}

.custom-checkbox .custom-control-indicator {
    content: "";
    display: inline-block;
    position: relative;
    width: 30px;
    height: 10px;
    background-color: #818181;
    border-radius: 15px;
    margin-right: 10px;
    -webkit-transition: background .3s ease;
    transition: background .3s ease;
    vertical-align: middle;
    margin: 5px 16px;
    box-shadow: none;
    float: right;
}

.custom-checkbox .custom-control-indicator:after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: #f1f1f1;
    border-radius: 21px;
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
    left: -2px;
    top: -4px;
    -webkit-transition: left .3s ease, background .3s ease, box-shadow .1s ease;
    transition: left .3s ease, background .3s ease, box-shadow .1s ease;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-indicator {
    background-color: #f57727;
    background-image: none;
    box-shadow: none !important;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-indicator:after {
    background-color: #f57727;
    left: 15px;
}

.custom-checkbox .custom-control-input:focus ~ .custom-control-indicator {
    box-shadow: none !important;
}
...