Popularni postovi

Monday, 19 October 2015

Customize default select with CSS and Bootstrap-select

Best select customizes for me is bootstrap-select, it is simple and works very good.
Just add css on the beginig of your code, ad js file on the of your code, and add to your default select class selectpicker.
Example: <select id="days" name="days"  class="selectpicker">
<option value="">DAY</option>...
And it works!

Customize default CheckBox, Radiobox with css and HTML

Best site for download customizations for checkbox is: http://www.csscheckbox.com/
and for radio buttons: http://www.csscheckbox.com/radio-buttons/0/

Pick one of them and save picture of checkbox/radiobox to your computer so you can callit from css like this: background-image:url(../img/cssradiobox1.png);.

Add this css code to your css file:

 /*checkboxes*/
 label {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 input[type=checkbox].css-checkbox {
   position: absolute;  
   overflow: hidden;  
   clip: rect(0 0 0 0);  
   height:1px;  
   width:1px;  
   margin:-1px;  
   padding:0;
   border:0;
 }
 input[type=checkbox].css-checkbox + label.css-label {
   padding-left:20px;
   height:15px;  
   display:inline-block;
   line-height:15px;
   background-repeat:no-repeat;
   background-position: 0 0;
   font-size:15px;
   vertical-align:middle;
   cursor:pointer;
 }
 input[type=checkbox].css-checkbox:checked + label.css-label {
   background-position: 0 -15px;
 }
 .radio label, .checkbox label {
   min-height: 10px;
 }
 .account_creation label {
   padding-top: 0px;
 }
 /*specific classes related to Checkbox skins*/
 .lite-gray-check{background-image:url(../img/lite-gray-check.png);}
 input[type=checkbox].css-checkbox.med + label.css-label.med {
   padding-left:22px;
   height:17px;  
   display:inline-block;
   line-height:17px;
   background-repeat:no-repeat;
   background-position: 0 0;
   font-size:15px;
   vertical-align:middle;
   cursor:pointer;
 }
 input[type=checkbox].css-checkbox.med:checked + label.css-label.med {
   background-position: 0 -17px;
 }
 input[type=checkbox].css-checkbox.sme + label.css-label.sme {
   padding-left:22px;
   height:16px;  
   display:inline-block;
   line-height:16px;
   background-repeat:no-repeat;
   background-position: 0 0;
   font-size:15px;
   vertical-align:middle;
   cursor:pointer;
 }
 input[type=checkbox].css-checkbox.sme:checked + label.css-label.sme{
   background-position: 0 -16px;
 }
 input[type=checkbox].css-checkbox.lrg + label.css-label.lrg {
   padding-left:22px;
   height:20px;  
   display:inline-block;
   line-height:20px;
   background-repeat:no-repeat;
   background-position: 0 0;
   font-size:15px;
   vertical-align:middle;
   cursor:pointer;
 }
 input[type=checkbox].css-checkbox.lrg:checked + label.css-label.lrg{
   background-position: 0 -20px;
 }
 input[type=radio].css-radiobox {
   position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
 }
 input[type=radio].css-radiobox + label.css-radiolabel {
   padding-left:22px;
   height:16px;  
   display:inline-block;
   line-height:16px;
   background-repeat:no-repeat;
   background-position: 0 0;
   font-size:15px;
   vertical-align:middle;
   cursor:pointer;
   /*padding-left:23px;
   height:18px;  
   display:inline-block;
   line-height:18px;
   background-repeat:no-repeat;
   background-position: 0 0;
   font-size:18px;
   vertical-align:middle;
   cursor:pointer;*/
 }
 input[type=radio].css-radiobox:checked + label.css-radiolabel {
   background-position: 0 -16px;
 }
 label.css-radiolabel {
   background-image:url(../img/cssradiobox1.png);
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }

After this you can use it on your web page like this:
Radio buton example:

 <input type="radio" name="plan" class="css-radiobox" id="planluxury" value="luxury"checked="checked" />
                <label for="planluxury" class="css-radiolabel sme radGroup1" class="top">Luxury</label>

Checkbox example:

 <input type="checkbox" class="css-checkbox" name="optin" id="optin" value="1"checked="checked" autocomplete="off"/>
                <label for="optin" class="css-label lite-gray-check">Receive special offers from our partners!</label>

As you can see we added to radio box input class="css-radiobox" and to label of radio box: class="css-radiolabel

For checkbox we added to input: class="css-checkbox",and for label: class="css-label lite-gray-check"