修改引导复选框样式

Question

I am trying to create a checkbox design where in there is a border for each checkbox item and a background of white.我正在尝试创建一个复选框设计，其中每个复选框项目都有一个边框和白色背景。

So far I have the ff HTML:到目前为止，我有 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>

And then on my CSS:然后在我的 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;
}

When you hover your mouse to each item it should supply a red border and also when you focus or click your mouse on each checkbox.当您 hover 鼠标指向每个项目时，它应该提供红色边框，并且当您在每个复选框上聚焦或单击鼠标时也是如此。

How do I attain the same exact design?我如何获得相同的精确设计？ Please if you can provide a codepen or jsfiddle.如果您可以提供 codepen 或 jsfiddle，请提供。 Thanks!谢谢！

Answer 1

You can try this:你可以试试这个：

Codepen Example 代码笔示例

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

I also found, that font used in your example is Bergen Sans .我还发现，您示例中使用的字体是Bergen Sans 。 However it is not available for free, or here are some demo links, but you have to download and include it manually.但是它不是免费提供的，或者这里有一些演示链接，但您必须手动下载并包含它。

修改引导复选框样式

问题描述

1 个解决方案

解决方案1
0 2021-04-16 22:01:04

修改引导复选框样式

问题描述

1 个解决方案

解决方案1 0 2021-04-16 22:01:04

解决方案1
0 2021-04-16 22:01:04