Category Archives: Tips and Tricks

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:

thumb

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.

X-Tabs – HTML5 Web Component Built with Mozilla X-Tags

Last night I introduced a new “html5 web components” category on my HTML5, CSS3 and JavaScript Experiments and Insight Website, so now all of the examples, which deal with this new and amazing technology are separated from the CSS and the JavaScript demos. Apart from that, I released a new component, based on Mozilla’s X-Tag and utilizing the JavaScript-less tabstrip solution I blogged about a sometime ago.

The component is called X-Tabs and allows declarative creation of fully functional tabs without any JavaScript:

<acidjs-xtabs width="100%" height="200" selectedtab="0" name="my-x-tab-01">
    <acidjs-xtabs-pane label="Home" hint="Go to our homepage">
        <h3>Home</h3>
        <p>Lorem ipsum.</p>
    </acidjs-xtabs-pane>
    <acidjs-xtabs-pane label="About Us" hint="More info about us">
        <h3>About Us</h3>
        <p>Sed ut perspiciatis?</p>
    </acidjs-xtabs-pane>
    <acidjs-xtabs-pane label="Downloads" hint="Visit our downloads section">
        <h3>Downloads</h3>
        <p>At vero eos et accusamus.</p>
    </acidjs-xtabs-pane>
    <acidjs-xtabs-pane label="Contact Us" hint="Give us a shout">
        <h3>Contact Us</h3>
        <p>Howdy?</p>
    </acidjs-xtabs-pane>
    <acidjs-xtabs-pane label="Disabled Tab" hint="Give us a shout" enabled="false">
        <h3>Disabled Tab</h3>
        <p>Just a disabled tab.</p>
    </acidjs-xtabs-pane>
    <acidjs-xtabs-pane label="Yet Another Tab" hint="And Yet Another Tab">
        <h3>Disabled Tab</h3>
        <p>Lorem ipsum dolor sit amet.</p>
    </acidjs-xtabs-pane>
</acidjs-xtabs>

x-tab

Have fun with the demo and feel free to modify and use the source code. If you like what I’m doing, follow me on Twitter or check my other posts about HTML5 Web Components, CSS3 or JavaScript.

X-Checkbox – Custom HTML5 Web Component

People who follow this blog (cheers, mates!) and my fellow co-workers know that I am interested in the form control styling, and especially that of check boxes and radio buttons. Over the years I have come up with a number of different solutions, but finally I found the time to start experimenting with the new and exciting world of the HTML5 Web Components. This is my first attempt to create a custom web component – a custom check box, built on top of Mozilla’s X-Tag library. The reason I did not use Google Polymer is just because I started playing with X-Tags, but certainly in the near future I will utilize Polymer.

So here it is – as easy as <acidjs-xcheckbox></acidjs-xcheckbox>, supporting native getters, setters and native properties (checked, disabled, class, etc.) as well as any other custom attributes, form submission without additional check box manipulation, keyboard events plus a couple of additional methods for toggling the enabled and checked states.

Since Shadow DOM is not consistent across browsers yet, the gory guts of the component will reveal a simple check box, wrapped in a label. The look and feel has been achieved with CSS3. Tested on Firefox and Chrome, but supposedly should work on other modern browsers plus IE11.

x-checkbox-custom-web-component

Have nice weekend and greetings from sunny Malta!

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.

css3-treeview-with-multiple-node-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

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).

thumb

Animated CSS3 Vertical Accordion

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

animated-css3-only-horizontal-accordion

CSS3 Treeview

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

css-3-treeview

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-treeview-with-multiple-node-selection

CSS3 Tabstrip

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

css3-tabstrip

Notifications Bar

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

css3-notification-bar

iPhone Toggle Buttons

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

javascript-iphone-toggle-buttons

Animated CSS3-only Slides Viewer

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

slides-viewer

Custom Skinnable Radio Buttons and Checkboxes

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

css-pages-imageless-css3-custom-checkboxes-and-radio-buttons

Enjoy the weekend!

Related Posts and Links