Htmldə Radio Button Dizaynı
Salam, dostlar.
Bu bir reallıqdır ki, ölkəmizdə bir proqram təminatının dizaynını da, funksionallığını da bir nəfər hazırlayır. Bu çətinlik qarşısında proqramçının iki seçimi olur: ya 0-dan dizayn edir, ya da internetdən işinə yarayacaq komponentləri tapıb birləşdirir.
Bu məqaləni mənim kimi ikinci üsulu seçənlər üçün yazıram. Məqalənin mövzusu isə radio button dizaynıdır.
Təxminən iki ay öncə işlədiyim proyektdə fərqli radio button dizaynı tələb olunurdu. Təbii ki, dizaynı internetdən tapdım (düzü, bu dizaynı tapmaq çox vaxtımı aparmışdı) və bir-iki dəyişiklik ilə radio button-u öz işimə yarayacaq şəkilə gətirdim. İndi isə bunu sizlərlə paylaşıram.
Default dizayn:
Html kod:
<html> <head> </head> <body> <form class="radio-toolbar"> <input id="rd1" type="radio" name="radios" value="System adminsitrator"> <label for="rd1">System adminsitrator</label> <input id="rd2" type="radio" name="radios" value="Graphic Designer"> <label for="rd2">Graphic Designer</label> </form> </body> </html>
Custom dizayn:
CSS kod: (bu css-i yuxarıdakı html faylına əlavə edin)
/*radio button-un öz dizaynını silirik*/
.radio-toolbar input[type="radio"] {
display:none;
}
/*radio button-a öz istədiyimiz dizaynı veririk*/
.radio-toolbar label {
width:500px;
display:block;
cursor: pointer;
font-size: 18px;
text-align:left;
color: #2b4295;
background-color:#fff;
border-radius:100px;
border:1px solid #ecedef;
box-shadow: 0 1px 0 #d1d3d3;
transition: all .2s;
margin: 0 0 10px 0;
padding: 10px 0 10px 20px;
}
/*radio button seçiləndə baş verəcək dizayn*/
.radio-toolbar input[type="radio"]:checked + label {
font-size: 30px;
font-weight: bold;
}
Uğurlar.
