7 Useful JS Fiddles
Tags: tutorial, programming, javascript, css
Published: 2021-11-03 18:40:01

---
title: 7 Useful JS Fiddles
published: true
description: Some useful snippets for you to use.
tags: tutorial, programming, javascript, css
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cu0hj945fss8tbbufvw9.jpg
---
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
{% jsfiddle https://jsfiddle.net/davinaleong/c83576a2/49/ result,html,css,js %}

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](https://www.w3schools.com/howto/howto_css_custom_checkbox.asp). I also decided to include a snippet for radio buttons in-case I needed it in the future.

#Ribbon Label
{% jsfiddle https://jsfiddle.net/davinaleong/km8fd29a/27/ result,html,css,js %}

Product ribbon label. The image is generated from [placeholder.com](https://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
{% jsfiddle https://jsfiddle.net/davinaleong/th18by4d/24/ result,html,css,js %}

Custom File Input Placeholder. This snippet uses [jQuery](https://jquery.com/).

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
{% jsfiddle https://jsfiddle.net/davinaleong/pszruL8a/34/ result,html,css,js %}

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
{% jsfiddle https://jsfiddle.net/davinaleong/q8me92nL/12/ result,html,css,js %}

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
{% jsfiddle https://jsfiddle.net/davinaleong/h7xfecu8/151/ result,html,css,js %}

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
{% jsfiddle https://jsfiddle.net/davinaleong/zt38hn6k/177/ result,html,css,js %}

This solution uses [jQuery](www.jquery.com).

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