پیشنمایش زنده
اسنیپت
کارت انتخاب قابل کلیک
فرم
کارت انتخاب
رادیو
۴۷
۴.۲ (۷)
<label class="radikalwp-ui-rdanim"><input type="radio" name="radikalwp-demo-radio"><span class="radikalwp-ui-rdanim-dot"><//span>ارسال با پست پیشتاز<//label>
.radikalwp-ui-rdanim {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
color: #334155;
cursor: pointer;
user-select: none;
}
.radikalwp-ui-rdanim input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.radikalwp-ui-rdanim-dot {
position: relative;
width: 20px;
height: 20px;
background: #fff;
border: 2px solid #94a3b8;
border-radius: 50%;
transition: border-color .2s ease, box-shadow .2s ease;
}
.radikalwp-ui-rdanim-dot::after {
content: '';
position: absolute;
top: 50%;
right: 50%;
width: 9px;
height: 9px;
margin: -4.5px -4.5px 0 0;
background: #7c3aed;
border-radius: 50%;
transform: scale(0);
transition: transform .25s cubic-bezier(.3, 1.8, .5, 1);
}
.radikalwp-ui-rdanim input:checked + .radikalwp-ui-rdanim-dot {
border-color: #7c3aed;
box-shadow: 0 0 0 4px rgba(124, 58, 237, .15);
}
.radikalwp-ui-rdanim input:checked + .radikalwp-ui-rdanim-dot::after { transform: scale(1); }
دکمه رادیویی با دایره سفید و نقطه بنفش که در لحظه انتخاب با حرکت فنری از مرکز بیرون میزند و هاله ظریفی دور دایره مینشیند. انتخاب میان گزینهها را واضح و لمسپذیر میکند. برای انتخاب روش ارسال، سطح اشتراک و هر گروه تکانتخابی مناسب است. چند رادیو با name یکسان گروه میشوند و رفتار استاندارد دارند.
مقدار name همه ورودیهای گروه را یکسان بگذارید. با این کار انتخاب یکی، بقیه را خاموش میکند و استایلها خودکار جابهجا میشوند.
رنگ پسزمینه نقطه در شبهالمان ::after و رنگ حاشیه و هاله در حالت checked را همخانواده تغییر دهید.
منحنی cubic-bezier با عدد دوم بزرگ باعث میشود نقطه کمی از حد رد شود و برگردد. این منحنی را میتوانید به ease ساده تغییر دهید.
میانگین امتیاز کاربران: ۴.۹ از ۳ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!