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!
My road to build usable AngularJS app with WebAPI. Here are some tips and tutorials which I used to solve my problems and to keep solutions on one place so I can easily find it when needed.
Popularni postovi
-
These days I tried a lot of select/Dropdown/Combobox controls in angular but on the end I realized that classic select2 (angular version) wo...
-
In Web API insert this: public IHttpActionResult GetKontakti(int page = 1,int itemsPerPage = 30, string sortBy = "Nazi...
-
Source: http://stackoverflow.com/questions/21255203/angularjs-clientside-routing-and-token-authentication-with-webapi Interceptors: http...
-
In order to show ng-grid you must do this: add 'ngGrid' to app definition like this: var app = angular.module('AngularAuthApp...
-
'use strict'; app.controller('ordersController', ['$http','$scope', 'ordersService', function ($htt...
-
After reading this answers article and this blog I changed: entity . Metadata = @"res://*/Data.System.csdl|res://*/Data.Syst...
-
I found that jQuery UI datepicker when putted in directive is better than Angular UI date picker because it requires less JavaScript code be...
-
Visit: http://ngmodules.org/ There are modules for everything...
-
Here is tutorial: http://pointblankdevelopment.com.au/blog/angularjs-aspnet-web-api-2-server-side-sorting-searching-and-paging Suppose we...
-
The || operator can be used to fill in default values: var middle = stooge["middle-name"] || "(none)"; var status ...
Monday, 19 October 2015
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:
After this you can use it on your web page like this:
Radio buton example:
Checkbox example:
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"
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"
Subscribe to:
Posts (Atom)