دليل المبرمجين

تسجيل دخول تسجيل جديد

custom checkbox or radio input

كيف تعمل custom checkbox or radio input بون استخدام الـ icon

custom checkbox or radio input

html

<div>
    <h3>هل انت مبرمج</h3>
    <label>
        <input type="radio" name="oneTwo">
        <span class="one"></span>
        نعم
    </label>
    
    <label>
        <input type="radio" name="oneTwo">
        <span class="two"></span>
        لا
    </label>
</div>

css

body {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   padding: 50px;
   background-color: #f1f2f3;
   font-family: 'Segoe UI';
}
label {
   display: flex;
   padding: 10px;
}
label input {
   appearance: none;
   display: none;
   
}
label span {
   width: 10px;
   height: 10px;
   /*border-radius: 50%;*/
   display: inline-block;
   margin-left: 10px;
   margin-top: 10px;
   opacity: 0;
   position: relative;
}
label span.one::before {
   content: "";
   position: absolute;
   border-radius: 0 10px 10px 0;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 2px;
   background-color: #27ae60;
}
label span.one::after {
   content: "";
   position: absolute;
   border-radius: 10px 10px 0 0;
   bottom: 0;
   left: 0;
   width: 2px;
   height: 50%;
   background-color: #27ae60;
}
label span.two::before {
   content: "";
   position: absolute;
   border-radius: 10px;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 2px;
   background-color: #c0392b;
   transform-origin: left;
   transform: rotate(-45deg) translateX(1px);
}
label span.two::after {
   content: "";
   position: absolute;
   border-radius: 10px;
   top: 0;
   left: 0;
   width: 100%;
   height: 2px;
   background-color: #c0392b;
   transform-origin: left;
   transform: rotate(45deg) translate(0.5px,-0.5px);
}
label input:checked ~ span.one {
   opacity: 1;
   transform: rotate(-45deg) translateY(-8px);
}
label input:checked ~ span.two {
   opacity: 1;
   transform: translateY(-3px);
}
مصدر الاكواد