مشکل در checkbox

[امیر 0]

با سلام چطور میتونم شکل یک چک باکس رو با bootstrap عوض کنم

[saber 143]

میتونید از پلاگین زیر استفاده کنید

https://lokesh-coder.github.io/pretty-checkbox/

[Amir_Kh1984 17]

میتونید از استایل های زیر استفاده کنید.

input[type="checkbox"].checkbox, input[type="radio"].radio {
                position: relative;
                -webkit-appearance: none;
                -moz-appearance: none;
                background-color: #dee2e6;
                top: 5px;
                width: 17px;
                height: 17px;
                display: inline-block;
                border-radius: .2rem;
                cursor: pointer;
            }
            input[type="radio"].radio{
                border-radius: 50%;
            }
            input[type="checkbox"].checkbox:checked::after {
                content: '';
                position: absolute;
                top: 3px;
                right: 5px;
                width: 6px;
                height: 10px;
                border: solid #fff;
                border-width: 0 2px 2px 0;
                transform: rotate(45deg);
            }
            input[type="radio"].radio:checked::after{
                content: '';
                position: absolute;
                top: 5px;
                right: 5px;
                width: 7px;
                height: 7px;
                background-color: #fff;
                border-radius: 50%;
            }
            input[type="checkbox"].checkbox:checked, input[type="radio"].radio:checked{
                background: #3bd;
            }
            input[type="checkbox"].checkbox ~label{
                cursor: pointer;
            }

 

حال کلاس های تعریف شده را بصورت زیر به عناصر اضافه کنید.

<input id="cb1" type="checkbox" class="checkbox">
<label for="cb1">unselected checkbox</label>
							
<br>
<input id="cb1" type="checkbox" class="checkbox" checked>
<label for="cb1">selected checkbox</label>

<br>
<input id="cb2" type="radio" class="radio">
<label for="cb2">unselected radio</label>
							
<br>
<input id="cb2" type="radio" class="radio" checked>
<label for="cb2">selected radio</label>

البته می تونید با اعمال تغییراتی در استایل ها، کنترل ها را به شکل مورد نظر خود در آورید.