Category Archives: CSS Hacks

Adding Icons to the Option Elements of the Select Tag in Firefox. Quick and Dirty

Below is a quick and dirty solution for adding icons to the <option /> elements of the <select /> tag utilizing CSS generated content.

Disclaimer: According to the CSS specs, the <option /> element should not support generated content, and this solution works only in Firefox. Anyways, it may come handy sometime.

The Result:


The CSS:

.acidjs-cssw-select-icons option::before
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin: 2px 6px 2px 2px;
    width: 16px;
    height: 16px;
    background: url("path/to/the/icon.png") no-repeat center;

The demo and the download link are on this page. If you are interested in more CSS3, HTML5 WebComponents and JavaScript stuff, make sure you check my experiments website.

CSS3 Treeview with Nested Nodes Selection. Almost JavaScript-less.

This is a follow-up to one of my most popular posts, which I have been planning for quite some time. So, here it is – the new CSS3-only driven treeview, with updated looks and support for selection of nested nodes. And 5 lines of optional JavaScript in case you would like to use the checkbox nested nodes selection.


On this page you will find a working example, as well as the HTML,  CSS3 and JavaScript source code listing.

The solution is CSS3-heavy, and has been tested on Firefox, Chrome, Opera and Internet Explorer 9+. In case you are interested in other atypical uses of checkboxes and radio buttons for building of interactive UI widgets, you may want to check this post.

Related Posts and Links

HTML5, CSS3 and JavaScript Pie Charts

AcidJs.Pie is a lightweight pie chart plotting widget, utilizing CSS3 instead of HTML5 canvas or SVG with small, but powerful and easy to use API, custom events and numerous usage possibilities.


You may download AcidJs.Pie or find more information on this page, and the demo and documentation are here.

More Screenshots





Key Features

  • Fast and elegant, with a very small footprint
  • Small, but powerful API
  • Custom events
  • Fully CSS3-driven – no Canvas, SVG or Flash


  • Standards-compliant (HTML5 or XHTML) page
  • JavaScript should be enabled in the browser
  • Web-server

Related Posts and Links

Atypical Uses of Radio Buttons and Checkboxes for Building Interactive UI Widgets

Radio buttons and checkboxes are traditionally associated with forms and data, however if you spend some time playing with these elements and CSS you will certainly find a lot more possible and not so boring uses. Here are a few, which will maybe give you ideas and will inspire you.

Star Rating Widget

Fully functional star rating widget, utilizing simple HTML form, hidden radio buttons, adjacent sibling selectors and right-to-left, with hover, selection, persisted state and disabling (a.k.a. already voted).


Animated CSS3 Vertical Accordion

The widget utilizes a simple form with radio buttons, CSS3 animations and adjacent sibling selectors.


CSS3 Treeview

Fully functional, multi-level CSS3-only treeview with persisted state, utilizing hidden checkboxes and list elements.


CSS3 Treeview with Nested Nodes Selection. Almost JavaScript-less.

Similar to the treeview from the previous example, but with updated look and feel and added support for nested nodes selection via an additional checkbox.


CSS3 Tabstrip

Feature-complete CSS3-only tabstrip widget, utilizing hidden radio buttons.


Notifications Bar

JavaScript-less animated notifications bar, utilizing a couple of div elements and a single hidden checkbox.


iPhone Toggle Buttons

Fully functional iPhone-like toggle buttons, made up of labels, radio buttons or checkboxes.


Animated CSS3-only Slides Viewer

Fully functional presentation slides viewer, utilizing radio buttons, CSS counters and animations with native keyboard arrow support.


Custom Skinnable Radio Buttons and Checkboxes

My favorite approach for styling radio buttons and checkboxes with semantic and minimalistic markup.


Enjoy the weekend!

Related Posts and Links

HTML5, CSS3 and JavaScript Windows 8 Metro Tiles 2.0 is Out!

I am happy to announce that the new version of AcidJs.Tiles is out with improved and even more realistic looks and animations. It also includes a minor bug fix, related to the setting of the “title” property of the control.

AcidJs.Tiles is a JavaScript, HTML5 and CSS3 layout widget, which resembles the look and feel, functionality and behaviors of Windows 8 Metro tiles, and can be used on web sites or web apps. It is easy to configure via a small, but powerful API and events, and comes with stunning and realistic desktop-like 3D CSS3 animations.


The tiles can be used as placeholder of virtually anything – from simple text, to sophisticated markup and forms.



The new version is backwards compatible, so upgrading from version 1.0 is easy and out of the box and would not cause any trouble.

And last, but not least, click the image below to check a cool real-life demo of AcidJs.Tiles:

Related Posts and Links