Getting Started

First, if you haven't already, download jQuery here. Then save the following files.

jquery.zedit.min.js
zedit.css

Setup Your Page

Add the files to your HTML.

<link rel="stylesheet" href="zedit.css" />
<script src="jquery-3.1.0.min.js"></script>
<script src="jquery.zedit.min.js"></script>

File Input Usage

To use the custom file input, your html must follow a specific structure. Following an input tag you must have a label.

<input id="test" type="file"/><label for="test"></label>

To apply the custom input effect is simple. Optionally, you can supply a path to an image that will be used as the default display.

$('#test').zedit('http://zimnox.com/myflix/images/upload_image.png');

To customize how the new input element will look, edit the zedit.css file. Only make changes to the .zinput + label selector.

Editable Elements

With zedit, it couldn't be any easier to turn any element on your page instantly into an editable field. Simple add editme to the class name of any element and that's it! Double click on an element to edit it, click anywhere off the element to commit the changes and go back to that element's default appearance, or simply press the enter key. Pressing shift+enter will perform a normal carriage return.

<h2 class="editme">You can edit this title!</h2>

You can edit this title!

If you want to customize the look of the textfield, use this CSS to affect all the fields:

.ztextarea{background:red;}

or simply choose a specific field to alter.

.thing .ztextarea{background:red;}

You can view a live example here: https://jsfiddle.net/ucbd26t1/2/