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.

Collaboration with Webucator

A couple of weeks ago I was contacted by Webucator asking me if I’d be interested in the creation of a video tutorial with my Parallax Page Scroll Effect with Pure CSS3. No JavaScript. No Hassle blog post and experiment. Of course, I was much excited by the idea, especially when I was told that it will be directed and narrated by Chris Minnick from WatzThis – a published author of several amazing books on web development.

The video is available on YouTube already. Enjoy, have a great weekend and make sure you pay a visit to my new friends at Webucator if you are looking for professional online and onsite instructor-led training classes in web- and software development.

5 Years of Ribbon JS!

Ribbon JS is turning 5 this month! If you are planning to purchase a license, now it’s the time. Join the celebration and get any commercial license for the most advanced and feature-complete JavaScript, HTML5 and CSS3 MSOffice-like ribbon control available on the Internet today at a half price only in August 2015!

EU Cookie Consent HTML5 Web Component

AcidJs.XCookieConsent is a ready-made, fully customizable solution to the EU Cookie Law, wrapped as a custom HTML5 Web Component.


The component is being used on this blog as well. If you have dismissed the cookie consent bar, click the button below to open show it again:

Using the Tag *

First, go to the demo page and download the sample project, then try one of the following (you need just one instance of the tag on your page).

This website uses cookies to ensure you get the best experience.
<acidjs-xcookie-consent position="top" dismiss-button-text="Understood">
This website uses cookies to ensure you get the best experience.
<acidjs-xcookie-consent dir="rtl"></acidjs-xcookie-consent>

* The message should be set between the <acidjs-xcookie-consent></acidjs-xcookie-consent> tag and HTML is supported. If no content is set, the default text will be “This website uses cookies to ensure you get the best experience“.

HTML Attributes of the Tag

Apart from the standard HTML attributes, the following component-specific ones are supported:

  • position – optional position of the cookie consent bar. By default, position is "bottom", the possible value is "top".
  • dismiss-button-text – optional custom text for the dismiss button. If not set, the default value is "Got it!"

Direction is also supported – you could try dir="rtl" or dir="ltr" (default).

JavaScript Methods of the Tag

Apart from the standard JavaScript methods, getters and setters, the following component specific methods are also supported:

  • show() – to programmatically show the cookie consent bar. Calling this method will, however not delete the _acidjs_xcookie_consent_dismissed cookie.
    // JavaScript
    // jQuery
  • hide() –  to programmatically hide the cookie consent bar. This will, however not set the _acidjs_xcookie_consent_dismissed cookie.  Cookie will be set only if user clicks the button to dismiss the message.
    // JavaScript
    // jQuery

If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

SVG and JavaScript Image Placeholders

Web developers love online services like lorempixel, placeimage and especially placekitten. They save us time during the initial coding of a website or service, providing customizable image placeholders so we can concentrate on the actual coding of the product instead of searching for suitable stock images. All of these services, however have one thing in common – they require Internet connection, which in my case is not always lightning fast. This is why I decided to create a similar service, which runs fully in the browser – AcidJs.ImgPlaceholder – a tiny JavaScript class (only 2Kb minified and g-zipped), utilizing base64-encoded SVGs and fully configurable via *-data properties.



Normal <img /> tags, supplied with data-imgplaceholder attribute:

<img data-imgplaceholder />
<img data-imgplaceholder width="200" height="100" />
<img data-imgplaceholder data-label="Custom Label" data-border-width="20" data-border-color="#b01e00" data-bgcolor="#f3b200" data-forecolor="#b01e00" />
<img data-imgplaceholder data-forecolor="#333" data-bgcolor="#00c13f" width="200" height="130" />
<img data-imgplaceholder data-border-color="#e34c26" data-label="HTML5, SVG and JavaScript" data-bgcolor="#f6f6f6" width="300" height="200" />
<img data-imgplaceholder data-forecolor="#333" data-border-width="20" data-bgcolor="#00c13f" width="200" height="140" />

HTML Attributes

Any standard HTML attributes for images like width, height, title, alt, etc plus the following class-specific attributes:

  • data-imgplaceholder – Required attribute, which marks the image tag as a placeholder.
  • data-label – Allows optional label for the placeholder. Default value is width x height.
  • data-forecolor – Optional label color. Default value is #666.
  • data-bgcolor – Optional background color. Default value is #d4d0c8.
  • data-border-width – Optional border width. Default value is 10.
  • data-border-color – Optional border color. Default value is #666.


  • render – The method is invoked automatically on page load, but it can be called also manually to create image placeholders on demand.

Supported Browsers

Any SVG-capable browser.

Check the AcidJs.ImgPlaceholder here. If you are also looking for similar text placeholders you may also want to give a try to XLipsum – a HTML5 WebComponent that can generate Lorem Ipsum texts in various formats.