Sharing some JSFiddles the rest of you may find useful. I often use JSFiddle as a playground to test out snippets of UI code before putting them into an actual project. I built all these fiddles myself, with some help from Google. Excuse the boring colour scheme; I'm not much of a designer... Anyways, hope you find these code snippets useful.

Custom Checkbox & Radio

Custom checkboxes and radio buttons. Includes hover effects.

I had a project from my day job where I had to create custom checkboxes. I already had an idea on how to do it, but needed to test the idea. I got the code to render the checkmark here. I also decided to include a snippet for radio buttons in-case I needed it in the future.

Ribbon Label

Product ribbon label. The image is generated from placeholder.com.

My most recent project required me to style product labels as ribbons. I tried to find solutions online, but many of them were too complicated. In the end, I came up with this solution. I couldn't get pseudo elements to work for the ribbon corner. So I ended up using an inner div to achieve the result.

Custom File Input Placeholder

Custom File Input Placeholder. This snippet uses jQuery.

One of the projects I worked on recently at my day job needed needed a file input to upload the customer's profile picture. There were no input labels in the mockup. It used the placeholder attribute as the input's label. The problem is the file input type doesn't render the placeholder attribute. This fiddle is my solution to the problem after searching for ideas to the problem.

Custom Select Field

I often have designs that change the design of the select input arrow. After some searching, I found the code to render the arrow. Remember to make the input field's background transparent.

Button with Overlapping Shadow

I had one project where the button had such a design. Here is the solution.

To give a transparent appearance, make sure the inset box-shadow colour is the same as the your background colour.

Grid Gallery

I had to build a grid gallery for one of my projects for my day job. Since it was company policy to support IE11, I had to find a solution that works for IE11. Here is the solution I came up with.

I'm sure there's a better way to code a responsive grid, but this was what I could think of at that time.

Mega Menu Hover

This solution uses jQuery.

I had to build a mega menu for one of my projects. This was what I came up with.