customize radio/ select box (Web Design)

[web_designer_619]

මෙක නම් පොඩි Scene එකක්, මන් කියලා දෙන්නම් කොහොමද customize කරන්නෙ checkbox & radio buttons ඔකොම.මෙන්න මේ CSS ටික දල ඔයාලා කෑමති විදියට කරන්න.
HTML :
<input type="checkbox" value="check1" name="check" id="check1">
<label for="check1"></label>


CSS 3

label { display: inline-block; cursor: pointer; position: relative; padding-left: 25px; margin-right: 15px; font-size: 13px; }
.wrapper { width: 500px; margin: 50px auto; }
input[type=radio], input[type=checkbox] { display: none; }
label:before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 10px; position: absolute; left: 0; bottom: 1px; background-color: #aaa; box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); }
.radio label:before { border-radius: 8px; }
.checkbox label { margin-bottom: 10px; }
.checkbox label:before { border-radius: 3px; }
input[type=radio]:checked + label:before { content: "\2022"; color: #f3f3f3; font-size: 30px; text-align: center; line-height: 18px; }
input[type=checkbox]:checked + label:before { content: "\2713"; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 15px; color: #f3f3f3; text-align: center; line-height: 15px; }


Example

මන් කරපු එකක්

http://www.hongkiat.com/blog/css3-checkbox-radio/
http://css-tricks.com/dropdown-default-styling/


ස්තුති

 

[mldarshana]

ela ela

 

[web_designer_619]

thanks machanla