Блог

Главная - Вопросы по программированию - Изменение стиля флажка начальной загрузки

Изменение стиля флажка начальной загрузки

#html #css

Вопрос:

Я пытаюсь создать дизайн флажка, в котором для каждого элемента флажка есть рамка и белый фон.

До сих пор у меня есть ff HTML:

 <div class="col-lg-7">
  <div class="mark">
    <h3 class="q-item">Where do you want to live in the near future?</h3>
    <div class="row">
        <div class="col-lg-6">
            <div class="form-check ps-0">
                <label class="form-check-label q_check box">United States 
                    <input class="form-check-input" name="" type="checkbox" value="US"> 
                </label>
            </div>
            <div class="form-check ps-0">
                <label class="form-check-label q_check box">India 
                   <input class="form-check-input" name="" type="checkbox" value="India"> 
               </label>
            </div>
            <div class="form-check ps-0">
                <label class="form-check-label q_check box">Brazil 
                    <input class="form-check-input" name="" type="checkbox" value="Brazil"> 
                </label>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="form-check ps-0">
                <label class="form-check-label q_check box">United Kingdom 
                    <input class="form-check-input" name="" type="checkbox" value="UK"> 
                </label>
            </div>
            <div class="form-check ps-0">
                <label class="form-check-label q_check box">Europe 
                    <input class="form-check-input" name="" type="checkbox" value="Europe"> 
                </label>
            </div>
            <div class="form-check ps-0">
                <label class="form-check-label q_check box">Turkey 
                    <input class="form-check-input" name="" type="checkbox" value="Turkey"> 
                </label>
            </div>
        </div>
        <div class="col-lg-12">
            <div class="form-check ps-0">
                <label class="form-check-label q_check box">I want to live nearby 
                    <input class="form-check-input" name="" type="checkbox" value="None"> 
                </label>
            </div>
        </div>
    </div>
  </div>
</div>

А затем на моем CSS:

 .form-check{
  padding: 14px 15px 14px 45px;
  border-radius: 5px;
  border: 1px solid #dedede;
  background: #fff;
  border-radius: 
}

input[type="checkbox"].form-check-input
{
  border-radius: 5px;
  background: red;
  margin-right: 10px;
}

Когда вы наводите курсор мыши на каждый элемент, он должен содержать красную рамку, а также когда вы фокусируетесь или щелкаете мышью на каждом флажке.

Как мне добиться такого же точного дизайна? Пожалуйста, если вы можете предоставить кодовый код или jsfiddle. Спасибо!

Ответ №1:

Вы можете попробовать это:

Пример Кода

 <html>
   <head>
      <title>Modifying bootstrap checkbox style</title>

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous">

      <style type="text/css">
         .form-check{
            padding: 10px 10px 10px 40px;
            border-radius: 5px;
            border: 1px solid #dedede;
            background: #fff;
            margin-top: 12px;
         }
         .mark, mark {
            padding: 1.5em;
            background-color: #f7f9ff;
         }
         .mark label{
            margin-top: 2px;
            margin-bottom: 2px;
            margin-left: 6px;
         }
         /* Hide the browser's default checkbox */
         .form-check input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
         }
         /* Create a custom checkbox */
         .checkmark {
            position: absolute;
            top: 12px;
            left: 12px;
            height: 25px;
            width: 25px;
            background-color: #eee;
            border-radius: 5px
         }
         /* On mouse-over, add a grey background color */
         .form-check:hover input ~ .checkmark {
            background-color: #ccc;
         }
         /* When the checkbox is checked, add a red background */
         .form-check input:checked ~ .checkmark {
            background-color: #dc3545;
         }
         /* Create the checkmark/indicator (hidden when not checked) */
         .checkmark:after {
            content: "";
            position: absolute;
            display: none;
         }
         /* Show the checkmark when checked */
         .form-check input:checked ~ .checkmark:after {
            display: block;
         }
         /* Style the checkmark/indicator */
         .form-check .checkmark:after {
            left: 8px;
            top: 4px;
            width: 8px;
            height: 14px;
            border: solid white;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
         }

      </style>
   </head>

   <body>

      <div class="col-lg-7">
         <div class="mark">
            <h3 class="q-item">Where do you want to live in the near future?</h3>
            <div class="row">
               <div class="col-lg-6">
                  <div class="form-check">
                     <label>United States<input type="checkbox" value="US"><span class="checkmark"></span></label>
                  </div>
                  <div class="form-check">
                     <label>India<input type="checkbox" value="India"><span class="checkmark"></span></label>
                  </div>
                  <div class="form-check">
                     <label>Brazil<input type="checkbox" value="Brazil"><span class="checkmark"></span></label>
                  </div>
               </div>
               <div class="col-lg-6">
                  <div class="form-check">
                     <label>United Kingdom<input type="checkbox" value="UK"><span class="checkmark"></span></label>
                  </div>
                  <div class="form-check">
                     <label>Europe<input type="checkbox" value="Europe"><span class="checkmark"></span></label>
                  </div>
                  <div class="form-check">
                     <label>Turkey<input type="checkbox" value="Turkey"><span class="checkmark"></span></label>
                  </div>
               </div>
               <div class="col-lg-12">
                  <div class="form-check">
                     <label>I want to live nearby<input type="checkbox" value="None"><span class="checkmark"></span></label>
                  </div>
               </div>
            </div>
         </div>
      </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

    </body>
</html>

Я также обнаружил, что шрифт, используемый в вашем примере, — Bergen Sans. Однако он недоступен бесплатно, или вот несколько демонстрационных ссылок, но вы должны загрузить и включить его вручную.

Комментарии:

1. Кстати, я не был уверен насчет красной границы при зависании. Если вы можете показать, как это должно выглядеть, я тоже могу это добавить.

Метки: