تغيير شكل checkbox

يمكنك استعمال الخاصية border-radius للقيام بتغيير شكل الصندوق، عند قيمة معينة لهذه الخاصية سيصبح الشكل دائري، يمكنك تجريب القيم حتى الحصول على الشكل المطلوب، حيث أنه بتغيير القيمة تصبح الحواف أنعم و عند قيمة معينة سيصبح الشكل دائري.

يمكنك استعمال الخاصية accent-color لتغيير اللون، كمثال على ذلك:

#cb1 {
  accent-color: #ffffff;
}

يوجد أيضاً الكثير من الأشكال الجاهزة التي يمكنك استعمالها و التي قام مطورون آخرون بتطويرها، و يمكنك إيجادهم هنا.

يمكنك استعمال حيلة بسيطة أخرى لمقاربة ذات النتيجة، نستعن في هذا بعناصر label. 

لنصف الهيكلة التالية:

<label>
  <span id="enabled" class="enabled-checkbox">&#10004;</span>
  <input id="checkbox" type="checkbox" />
  <span id="disabled" class="disabled-checkbox">&#10006;</span>
</label>

نصف هنا عنصري span واحد يعبر عن حالة تفعيل الصندوق وواحد عن حالة تعطيله. يمكنك تنسيقهما وفقما ما تريد:

label input{
  display: none;
}
label .enabled-checkbox ,label .disabled-checkbox {
  height: 50px;
  width: 50px;
  padding:5px;
  border: 1px solid red;
}

ايضا انتبه الى ان انه تم اخفاء عنصر input. لأن الضغط على عنصر label سيكون تبديلا لحالة العنصر. 

ثم اخيرا عن طريق الجافاسكربت:

• الاستماع الى حدث تغيير حالة الصندوق.
• ففي حالة تفعيله. نقوم بإخفاء العنصر المتعلق بتمثيل حالة التعطيل واظهار الخاص بحالة التفعيل. 
• وفي حالة تعطيله نقوم بإخفاء العنصر المتعلق بتمثيل حالة التفعيل. واظهار الخاص بحالة التعطيل.

let input = document.querySelector('#checkbox');

input.addEventListener('change', (event) => {
  if (event.currentTarget.checked) {
    enabled.style.display = "inherit"
    disabled.style.display = "none"
  } else {
    disabled.style.display = "inherit"
    enabled.style.display = "none"
  }
})

ايضا انتبه الى انه يجب اخفاء احد عنصري span بشكل افتراضي يوافق الحالة الافتراضية لعنصر الصندوق:

label .disabled-checkbox{
  display: none;
}

بتاريخ منذ ساعة مضت قال Kais Hasan:

يمكنك استعمال الخاصية border-radius للقيام بتغيير شكل الصندوق، عند قيمة معينة لهذه الخاصية سيصبح الشكل دائري، يمكنك تجريب القيم حتى الحصول على الشكل المطلوب، حيث أنه بتغيير القيمة تصبح الحواف أنعم و عند قيمة معينة سيصبح الشكل دائري.

يمكنك استعمال الخاصية accent-color لتغيير اللون، كمثال على ذلك:

#cb1 {
  accent-color: #ffffff;
}

يوجد أيضاً الكثير من الأشكال الجاهزة التي يمكنك استعمالها و التي قام مطورون آخرون بتطويرها، و يمكنك إيجادهم هنا.

شكراً على إجابتك, 

حاولت استخدام خاصية border-radius لعنصر input من نوع checkbox لكنها لم تنجح , هل أنت متأكد من هذه الخاصية انها تؤثر  ؟ 

بتاريخ 23 دقائق مضت قال Hadi Hasan:

شكراً على إجابتك, 

حاولت استخدام خاصية border-radius لعنصر input من نوع checkbox لكنها لم تنجح , هل أنت متأكد من هذه الخاصية انها تؤثر  ؟ 

للحصول على الشكل الدائري يمكنك إستعمال الخاصية border-radius  بقيمة 50% لكن تحتاج لجعل الخاصيتين width و height متساويتين في القيمة حتى تحصل على شكل دائري لاحظ المثال التالي

...
.custom-input {
   
   width:100px;
   height:100px;
   border-radius:50% /* %يجب ان تكون 50 */
}
...
<input class="custom-input" type="text" id="fname" name="fname">
...
	

بتاريخ 3 دقائق مضت قال علي محسن:

<input class="custom-input" type="text" id="fname" name="fname">

 المقصود من سؤالي : شكل الصندوق ل "input type="checkbox  لم تؤثر خواص الإطار border عليه  ولا border-radius  

بتاريخ 32 دقائق مضت قال Hadi Hasan:

 المقصود من سؤالي : شكل الصندوق ل "input type="checkbox  لم تؤثر خواص الإطار border عليه  ولا border-radius  

بتاريخ 22 دقائق مضت قال علي محسن:

تستطيع أيضاً تغيير شكل العنصر input من النوع checkbox الى شكل دائري من خلال نفس الإجراءات في الرد السابق لكن مع الأخذ بنظر الإعتبار أن علامة checked الأفتراضية ستختفي لأننا بحاجة لإخفاء شكل العنصر الإفتراضي والإستعاضة بتغيير الخلفية مثلاً الى لون معين عندما يكون العنصر checked

...
.checkbox-round {
    width: 1.3em;
    height: 1.3em; /* الأرتفاع مساوي للعرض */
    background-color: white;
    border-radius: 50%; /* %يجب أن يكون 50  */
    vertical-align: middle;
    border: 1px solid #ddd;
    appearance: none; /* إخفاء الشكل الأفتراضي */
    -webkit-appearance: none; /* webkit دعم متصفحات تستعمل */
    outline: none; 
    cursor: pointer;
}

.checkbox-round:checked {
    background-color: gray; /* تغيير الخلفية عندما يكون مفعلاً*/
}
...
  <input class="checkbox-round" type="checkbox" id="fname" name="fname">
...