img

ساخت دکمه‌های رادیویی سفارشی با CSS

/
/
/

از قدرت مشخصه‌های سفارشی HTML و CSS استفاده کنید تا المان‌های صفحه ای پویا و قابل استفاده مکرر بسازید.

امروز می‌خواهیم دکمه‌های رادیویی (radio control) و جعبه‌های بررسی (checkbox) سفارشی را با CSS و HTML بسازیم. برای آنکه اینها واقعا پویا و باز بهره پذیر (reusable) باشند ما از روش BEM و مشخصه‌های سفارشی CSS استفاده می‌کنیم. با بهره گیری از آداب نام گذاری BEM ما می‌توانیم استایل سفارشی را تنها به المان هایی که می‌خواهیم اعمال کنیم، و با استفاده از مشخصه‌های سفارشی CSS ما می‌توانیم مشخصه‌های پایه ای را که بر مبنای یک کلاس تکی والد (parent class) هستند را ابطال کرده، که این را مدیون ویژه سازی هستیم.
روشی که Checkbox‌ها و radio button‌ها ساخته می‌شوند کمی ابتکاری و نامتعارف است. ما ورودی‌های حقیقی را پنهان خواهیم ساخت و از شبهه المان‌های «قبل» و «بعد» برای ساخت CSS خود استفاده خواهیم کرد. با استفاده از گزینش گر(selector)های ‘+’ و ‘:Checked’ سومین نگارش از CSS (CSS3) ما می‌توانیم استایل‌های گوناگونی را هنگامی که ورودی “checked” می‌باشد، اعمال کنیم.
برای اینکه تمامی اینها عملی گردد ما نیاز به HTML صحیح و در دسترسی داریم، که از مشخصه‌ی ‘label for’ سود می‌برد. ما بایستی از اینکه بر روی ورودی ID قرار دارد اطمینان حاصل کرده، تا برچسب(label) کلیک پذیر شود تا ورودی را به صورت تیک خورده (checked) علامت گذاری کنید
ما همچنین از انتقال‌های CSS (transitions) برای پویانمایی انتقال بین تیک خورده بودن و تیک نخورده بودن استفاده می‌کنیم. ما برای دستیابی به این هدف از مشخصه ‘transform’ استفاده می‌کنیم. ما برای internet Explorer جایگزین هایی در نظر می‌گیریم و فقط از media query برای مرورگرهای مایکروسافت استفاده می‌کنیم، تا مطمئن شویم که نسخه ای بی اشکال برای حد اکثر کاربران ممکن فراهم آوریم.

 

۱- ساختن HTML
برای شروع، ما بایستی یک فرم که داری دکمه‌های رادیویی و جعبه‌های بررسی(checkbox) می‌باشد را بسازیم. فراموش نکنید که از مشخصه ‘label for’ و ID‌های یگانه ای برای هر وروی (input) استفاده کنید. بدون HTML دسترس پذیر این شیوه از چیدمان و استایل کردن این المان‌های ابتکاری میسر نخواهد بود.

<form><input class=”radio” id=”radio-one”
type=”radio” name=”radio” value=”one” />
<label class=”radio__label”
for=”radio-one”>Radio Button One</label>
<input class=”radio” id=”radio-two”
type=”radio” name=”radio” value=”two” />
<label class=”radio__label”
for=”radio-two”>Radio Button Two</label>
</form>

 

۲- مشخصه‌های سفارشی CSS
درون فایل CSS، ما مشخصه‌های سفارشی ابتدایی را برای رنگ پیش فرض، رنگ ورودی، اندازه ورودی و واحد فضای خالی خود را می‌سازیم، در کنار آن مقداری تزئینات ابتدایی بر روی صفحه نیز انجام می‌شود.
با تعیین اندازه ورودی توسط ‘em’، اندازه با توجه به بزرگی فونت ظرف والد (parent container) تنظیم می‌شود – در حالی که واحد فضای خالی تاثیر نمی پذیرد، که به عنوان یک مقدار ‘rem’ تعیین می‌گردد.

<head>
<meta http-quiv=”content-type”
Content=”text/html; charset=utf-8”/>
<title>Flexbox Layout Tutorial</title>
<meta name=”viewport” content=”
width=device-width, initial-scale=1
“>
CSS”>
</head>

 

ساخت دکمه‌های رادیویی سفارشی با CSS

۳- مخفی کردن دکمه‌ها و جعبه‌های پیش فرض
از آنجایی که ما خودمان استایل‌ها را برای دکمه‌های رادیویی و جعبه‌های بررسی خواهیم ساخت، که این کار را با شبهه المان‌های برچسب (label) آنها انجام می‌دهیم، می‌تواینم با جانشانی ‘absolute’ برای پنهان کردن ورودی ها، برای المان هایی که کلاس سفارشی ما بر رویشان اعمال می‌شود، اقدام کنیم.

.checkbox,
.radio {
Position: absolute:
Left: -9999px; }

 

 

۴- استایل کردن برچسب(label)
سپس ما تعدادی استایل پیش فرض برای تمام برچسب‌های خود اضافه می‌کنیم، مشخصه‌های چیدمان(layout) Flexbox را برای در وسط قرار دادن عمودی متن برچسب اعمال می‌کنیم، و یک جانشانی نسبی را انجام داده تا بتوانیم جانشانی اکمل (absolute) را بر روی شبهه المان‌های داخل آن اعمال کنیم.

.checkbox__label,
.radio__label {
display: flex;
align-items: center;
position: relative;
cursor: pointer; }

 

۵- Calc()
ما بایستی مخصوص ورودی، مقداری فضا را در سمت چپ برچسب خود ایجاد کنیم. قصد ما این است که اندازه ورودی ما با توجه به یک مشخصه سفارشی به روز رسانی شود، ما می‌توانیم با استفاده از calc در کنار داشتن مشخصه سفارشی –input-size خودمان برای ساخت فضای خالی مورد نیاز خود اقدام کنیم.

.checkbox__label,
.radio__label {
padding-left:
clac(var(–input-size) * 1.25);
height: var(–input-size);
margin-bottom:
calc(var(–spacing-unit) / 4); }

 

۶- شبهه المان‌ها
به منظور استفاده از شبهه المان‌های ‘after’ و ‘before’، ما بایستی مشخصه content را آماده کنیم. حتی اگر آن مقداری تهی باشد. ما همین طور می‌خواهیم که آنها در سمت بالا-چپ به طرزی abosolute نسبت به برچسب مربوطهpostion شوند.

.checkbox__label::before,
.checkbox__lablel::after,
.radio__label::before,
.radio__label::after {
Content: ‘’;
Position: absolute;
top: 0;
left: 0; }

 

۷- استایل شبهه المان ‘before’
برای ساخت دکمه‌ی رادیویی مان و جعبه‌های بررسی، ما بایستی به آنها یک عرض و یک ارتفاع بدهیم. که به وسیله‌ی مشخصه سفارشی –input-size خود آنها را تعیین می‌کنیم. ما همچنین یک مرز را با استفاده از رنگی که به وسیله –input-color داشته ایم، ایجاد می‌کنیم.

.checkbox__label::before,
.radio__label::before {
display:: block;
width: var(–input-size);
height: var(–input-size);
border: 2px solid var(–input-color); }

۸- گرد ساختن دکمه‌های رادیویی
برای متمایز کردن دکمه‌های رادیویی از جعبه‌های بررسی، ما شکل آنها را با استفاده از مشخصه border-radious گرد می‌کنیم.

.radio__label::before,
.radio__label::after {
Border-radius: 50%; }

 

ساخت دکمه‌های رادیویی سفارشی با CSS

۹- استایل input focus
به منظور فراهم کردی نشانگر موقعیت در فرم برای کاربرانی که از صفحه کلید استفاده می‌کنند، ما می‌توانیم از انتخابگر :focus استفاده کنیم و کمی هم از استایل بیشتری بهره گیری کنیم.

Input::focus + .checkbox__label::before,
input::focus + .radio__label::before {
input::focus + .radio__label::before {
box-shadow:
۰ ۰ ۰٫۵em 0.025em rgba(0,0,0,0.2);
border-color: #666; }

 

۱۰- استایل شبهه المان ‘after’
اکنون که ما استایل مورد نیاز برای المان‌های انتخاب نشده را در اختیار داریم، نیاز است که برای آن، هنگامی که انتخاب می‌شود(تیک می‌خورد) نیز استایل ایجاد کنیم. ما به این منظور با استفاده از calc و مشخصه‌های سفارشی خود دست می‌یابیم که پهنا، و ارتفاع و حاشیه را تعیین می‌کنند(width, height, margin). اینگونه می‌شود همه چیز را هنگامی که –input-size تغییر یا آپدیت می‌شود مقیاس دهی کرد.

.checkbox__label::after,
.radio__label::after {
width: calc(var(–input-size) –
(var(–spacing-unit) / 2));
height: calc(var(–input-size) –
(var(–spacing-unit) / 2));
margin: calc(var(–spacing-unit) / 4);
background-color: var(–input-color);
}

۱۱- آماده و پنهان سازی شبهه المان ‘after’ برای پویانمایی
به مدد استفاده از مشخصه ‘transform’ و تعیین ‘scale’ به رقم ۰، در کنار تنظیم مشخصه ‘transition’، ما می‌توانیم تغییرات میان «تیک خوردن» و «برداشتن تیک» را پویانمایی کنیم. به منظور اینکه پویانمایی المان از مرکز آغاز شود، نیاز است که ما مشخصه transform-origin را نیز تنظیم کنیم.

.checkbox__label::after,
.radio__label::after {
transform: scale(0);
transform-origin: 50%;
transform: transform 150ms;
}

 

۱۲- پویانمایی هنگام تیک خوردن
از آنجایی که ما برای پویانمایی، از قبل شبهه المان ‘after’ را آماده کرده ایم، تنها مقداری را که نیاز تغییر یابد ‘scale’ می‌باشد. به مدد استفاده از انتخابگر کناری (adjacent) ما می‌توانیم استایل‌های گوناگونی را به برچسب هنگام تیک خوردن ورودی اختصاص دهیم. این پیاده سازی‌ها ورودی و برچسب را ملزم می‌دارد که در درون HTML شما هم خانواده‌ی در کنار(adjacent siblings) هم باشند.

input::checked + .checkbox__label::after,
input::checked + .radio__label::after {
transform: scale(1);
}

 

۱۳- اضافه کردن به مشخصه‌های سفارشی ما
ما می‌توانستیم به سادگی اینها را بدون استفاده از مشخصه‌های سفارشی CSS نیز انجام دهیم، به هر حال اکنون ما فواید استفاده از آنها را بررسی می‌کنیم. ما با تعیین دو رنگ بیشتر در درون المان :root آغاز می‌کنیم.

:root {
–color-bravo: #1b9aaa;
–color-charlie: #ab3428;
}

 

۱۴- المان‌های غیرفعال
افزودن پشتیبانی مضاعف یا استایل‌های اضافی به المان‌های غیره فعال می‌تواند به راحتی با انتخابگر [disabled] و ترکیب آنها با انتخاب گر کناری(+) انجام گردد.

input[disabled] + .checkbox__label::before,
input[disabled] + .radio__label::before

 

۱۵- فرم‌های اضافی
داخل HTML ما دو فرم دیگر خواهیم ساخت و به هر کلاس با استفاده از الفبای فونوتیکی نامی اختصاص می‌دهیم، با علم به اینکه باید هر المان از یک ID یگانه برخوردار باشد.

<form class=”brave”>
…..
</form class=”Charlie”>
…..
</form>

۱۶-ابطال(override) مشخصه‌های سفارشی
نظر به ویژه بودن المان‌ها از جهت نام گذاری و چگونگی سرازیر شدن CSS، ما می‌توانیم –input-color را با توجه به نام کلاس به روز رسانی کنیم، آنها را با رنگ‌های پایه مقداری دهیم کنیم. بدین ترتیب این رنگ‌ها به رنگ مرزی و المان تیک خورده‌ی ورودی سرازیر می‌شود و آنها را تحث تاثیر قرار می‌دهد.

.bravo {
–input-color: var(–color-bravo);
}
.charlie {
–input-color: var(–color-charlie);
}

۱۷-افزایش اندازه فونت
همچنین ما می‌توانیم اندازه فونت را وابسته به نام کلاس به روز رسانی کنیم. از آنجایی که ما اندازه‌ی ورودی را توسط یک مقدار ‘em’ تعیین کرده ایم، اندازه ورودی با افزایش اندازه فونت بزرگتر می‌شود.

.bravo {
font-size: 1.125em;
}
.charlie {
font-size: 1.25em;
}

۱۸-به روز رسانی اندازه مشخصه سفارشی
همچنین ما می‌توانیم اندازه ورودی را به طور مستقل نیز تغییر دهیم. از آنجایی که ما از calc و مشخصه سفارشی
–spacing-unit استفاده کرده ایم، فضای خالی میان مرز و فضای پر شده در حالت تیک خورده(تکه وسطی) با تغییر اندازه ورودی لایتغیر باقی می‌ماند.

.bravo {
–input-size: 2.125em;
}
.charlie {
–input-size: 2.5em;
}

۱۹- به روز کردن مشخصه سفارشی :root
اگر ما مشخصه‌های سفارشی خود که درون گزینش گر :root هستند به روز کنیم، خواهید دانست که اندازه ورودی اندازه برای اولین فرم تغییر می‌یابد. این به علت است که ما آن را در راستای جریان به سمت پایین stylesheet خود تحت تاثیر قرار می‌دهیم(override). با این وجود اگر ما –spacing-unit را به روز رسانی کنیم، این تغییر شامل تمام سند می‌شود، یعنی فضای خالی اطراف همه‌ی المان‌ها را افزایش می‌دهد.

:root {
–input-size: 5em;
–spacing-unit: 2rem;
}

۲۰- مرورگر Internet Explorer
متاسفانه Internet Explorer از مشخصه‌های سفارشی CSS پشتیبانی نمی کند، بنابراین ما بایستی مقادیر جایگزین را فراهم کنیم.
این کار تا حدی جبران کننده است، با این حال همه‌ی آنها اندازه و رنگ یکسانی خواهند داشت.

.checkbox__label,
.radio__label {
padding-left: 2em;
padding-left:
calc(var(–input-size);
height: 1.5em;
height: var(–input-size);
margin-bottom: 0.25rem;
margin-bottom:
calc(var(–spacing-unit) / 4);
}

۲۱- مدیا کوئری Internet Explorer
با به کارگیری مدیا کوئری مختص به مایکروسافت، ما می‌توانیم کدی را ارائه دهیم که تنها بر روی مرورگرهای مایکروسافت می‌کند.

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
}

۲۲- تصحیح به روزی رسانی مشخصه‌های سفارشی
سپس ما می‌توانیم درون مدیا کوئری خود به عنوان جایگزین، مجموعه دستوراتی را که به حد کفایت ویژه سازی شده اند را قرار دهیم تا جایگزین هایی را که قبلا در پایه‌ی کد ایجاد کرده بودیم را ابطال نمایند. ما همچنین کد را از میان autoprefixer عبور می‌دهیم(srt.It/Tf1A5B) تا پشتیبانی از فایرفاکس و سایرین نیز مهیا شود.

.bravo .checkbox__label,
.bravo .radio__label {
Height: 2.125em;
Padding-left: 2.7em;
}

 

نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

It is main inner container footer text