CuteForm

Download & Install

CuteForm transforms your ugly <select> dropdowns into cute selectable images.

Minified Javascript Full Javascript Minified CSS Full CSS


	<!-- In head -->
	<link rel="stylesheet" href="cuteform.min.css">

	<!-- At the end of the body -->
	<script src="jquery.min.js"></script>
	<script src="cuteform.min.js"></script>

Using data- attributes in HTML

Using Javascript

With HTML elements instead of images

HTML elements can also be specified in Javascript:

Options

modal

'true' or 'false' (default = 'false')

When there are too many options, you can use a modal when the user clicks on the <select>.

<select ... data-cuteform-modal="true">...</select>

cuteform($('#language'), {'modal': 'true'});

Demo:

You can also use the text value on the selector:

<select ... data-cuteform-modal="true" data-cuteform-modal-text="true">...</select>

cuteform($('#language'), {'modal': 'true', 'modal-text': 'true'});

Demo:

You're going to need to either use Bootstrap modal plugin or code your own CSS/Javascript to show modals.

Bootstrap Modals CSS Bootstrap Modals Javascript


      <!-- In head -->
      <link rel="stylesheet" href="bootstrap-modals.min.css">

      <!-- At the end of the body, after JQuery inclusion -->
      <script src="bootstrap-modals.min.js"></script>

      <!-- At the end of the body, before any javascript inclusion -->

hide

'true' or 'false' (default = 'true')

Hide or not the <select> dropdown box
```
<select ... data-cuteform-hide="false">...</select>
```
```
cuteform($('#language'), {'hide': 'false'});
```
Demo:

Notes

It's possible to combine HTML elements and images in the same select, and it's also possible to combine Javascript and HTML data- attributes in the same select. In the latter, Javascript options may override HTML data- attribute options.
You can easily write your own style for the selectable images. The CSS is very simple and easy to write.

Repository & Social

GitHub repository

Author

Made by db0

Follow @db0company