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 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.
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. 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.
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.
I had one project where the button had such a design. Here is the solution.
To give a transparent appearance, make sure the
box-shadow colour is the same as the your
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.
This solution uses jQuery.
I had to build a mega menu for one of my projects. This was what I came up with.