I Can’t Believe It’s a Control!

jquery-icbiacontrol is a jQuery plugin that helps you style native browser controls, but not really.

It works by adding custom, styleable markup to the DOM right next to the original control, which is then made transparent and positioned on top of your custom widget. That way, when you interact with the styled widget, you’re actually interacting with the native browser control.

For example, when you use the plugin with a select box, you style only the “display” part. When the widget is engaged, the normal browser dropdown is shown. iOS will show its little scrolly wheel thing; desktop browsers will show the native dropdown list.

Currently, jquery-icbiacontrol works with the following elements:

select
input[type=checkbox]
input[type=radio]

Demo

HTML

This minimal HTML Example showcases how to get up and running quickly.

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <title>jquery-icbiacontrol demo</title>
 5   </head>
 6   <body>
 7     <form>
 8       <fieldset>
 9         <legend>Minimal Theme</legend>
10 
11         <label for="select">Select</label>
12         <select name="select" id="select">
13           <option disabled selected>Select One</option>
14           <option value="option">This is an option</option>
15           <option value="another">And another option</option>
16         </select>
17 
18         <hr />
19 
20         <label for="radio1">One</label>
21         <input type="radio" id="radio1" name="radio" value="1" />
22         <label for="radio2">Two</label>
23         <input type="radio" id="radio2" name="radio" value="2" />
24         <hr />
25 
26         <label for="checkbox">Agree</label>
27         <input type="checkbox" id="checkbox" name="checkbox" />
28       </fieldset>
29     </form>
30     <link rel="stylesheet" type="text/css" href="theme.css" />
31     <script src="jquery/jquery.min.js"></script>
32     <script src="jquery-icbiacontrol/jquery.icbiacontrol.js"></script>
33     <script>
34       $('select, [type="radio"], [type="checkbox"]').icbiaControl();
35     </script>
36   </body>
37 </html>

CSS

Checkout our minimal example theme.css. This css file makes use of the icbiacontrol-base.css which is a base css file providing just enough styling to make the elements visible in the browser. But lack (in)active states.

 1 @import 'icbiacontrol-base.css';
 2 
 3 /* Minimal Theme */
 4 .icbiacontrol {
 5   border: 4px solid #f5f5f5;
 6   background: #fff;
 7   font-size: .85em;
 8   color: #999;
 9 }
10 .icbiacontrol:focus,
11 .icbiacontrol.focus {
12   border-color: #d0d0d0;
13 }
14 .icbiacontrol i {
15   color: #05a7a9;
16 }
17 
18 /* Checkboxes and Radios */
19 .icbiaradio,
20 .icbiacheckbox {
21   width: 28px;
22   height: 28px;
23 }
24 
25 /* Selected Checkboxes and Radios */
26 .icbiaradio.checked i:after {
27   content: '\25C9';
28 }
29 .icbiacheckbox.checked i:after {
30   content: '\2713';
31   font-size: 1.4em;
32   line-height: 1;
33 }
34 
35 /* Selectboxes */
36 .icbiaselect {
37   width: 300px;
38   height: 38px;
39   background: white;
40   line-height: 20px;
41 }
42 .icbiaselect-display-wrapper {
43   padding-right: 30px;
44   padding: 6px 0 6px 6px;
45 }
46 .icbiaselect-arrow {
47   width: 30px;
48   height: 30px;
49   background-color: #f7f7f7;
50   border: 1px solid #cccfd8;
51 }
52 .icbiaselect-arrow i:after {
53   content: '\25BE';
54   line-height: 28px;
55   font-size: 1.2em;
56 }

Usage

1 $('select').icbiaControl();

The orignal control will be wrapped in a container with the classes “icbiacontrol” and “icbia", along with a styleable widget (see below for the default widget markup for each supported control type). Use CSS to style the widget however you want. When the element has focus, a class of "focus" will be added to the container (the element with the "icbiacontrol" class).

Options

Options can be passed either in an object when you initialize the plugin, or by setting prefixed data-* attributes on the select box you’re replacing. (For example, if you want to set the option “widgetTemplate”, you would use the attribute “data-icbiacontrol-widgetTemplate”.)

widgetTemplate

Used if you aren’t happy with the default widget markup icbiacontrol produces. Can be either a function that returns a jQuery object or a selector that will be used to find a template in the document. The classes “icbiacontrol-widget” and “icbia-widget" will be automatically added to your element.

Example

 1 <script id="icbiaselect-template" type="text/html">
 2     <div>
 3         <div class="icbiaselect-display"></div>
 4         <div>CLICK ME!</div>
 5     </div>
 6 </script>
 7 
 8 <script type="text/javascript">
 9     $('select').icbiaControl({widgetTemplate: '#icbiaselect-template'});
10 </script>

Supported Controls

select

1 <span class="icbiacontrol-widget icbiaselect-widget">
2     <span class="icbiaselect-display-wrapper">
3         <span class="icbiaselect-display"></span>
4     </span>
5     <span class="icbiaselect-arrow"><i></i></span>
6 </span>

Note: If providing a custom widget template, make sure it includes an element with the class “icbiaselect-display”. The plugin will use this to show the selected label.

checkbox & radio

1 <span class="icbiacontrol-widget icbiacheckbox-widget"><i></i></span>
2 <span class="icbiacontrol-widget icbiaradio-widget"><i></i></span>

The classes “checked” and “unchecked” will be added to the container (the element with the “icbiacheckbox” class) to inidicate the current state of the control.