jNiceIt - jQuery plugin to customize design of textboxes, radiobuttons, checkboxes, and more!

Framework: jQuery Listed in: Forms, User Interface

That's right! For only $19.00 our team will help configure this script and integrate it into your website. We move fast and guarantee our work for full browser compatibility.
Get Started Now!
jNiceIt

Description

jNiceIt is a jQuery plugin which allows you to customize generic form controls and apply your customized design to them. You may use this plugin to emulate MS Windows, Linux or Apple MacOS controls or your own unique style.

Design of each control can be fully customized via CSS. The plugin supports both fixed and fluid page layouts because it does not use absolute positioning of skinned controls like most jNiceIt alternatives do.

Features

  1. Light-weight script
  2. Easy to integrate
  3. Fully customizable via CSS
  4. Works with all modern browsers
  5. Supports fixed and fluid page layouts
  6. The following controls supported:
    1. Button
    2. Text Input
    3. Check Box
    4. Radio Button
    5. File Upload Input
    6. Select Box
    7. List
    8. Text Area

How to Use

1.) Download jNiceIt script. The package already contains jQuery framework.

2.) Add the following code to your <head>…</head> tag to connect jQuery framework and jNiceIt plugin. (Make sure paths to files are correct.)

<style type="text/css" media="screen">
    @import url("../jniceit.css");
</style>

<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../jniceit.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    //    This will skin the form with class '.NiceIt'
    $('form.NiceIt').NiceIt();
});
</script>

That’s it ;) Click the Demo button to see it in action.

That's right! For only $19.00 our team will help configure this script and integrate it into your website. We move fast and guarantee our work for full browser compatibility.
Get Started Now!

ajaxBlender.com

April 21, 2014

Hi Giuseppe,

We have emailed you regarding the regions and cities form customization.

Thanks!

Travis

Giuseppe

April 19, 2014

Hi,
Hello,
I want to create a dynamic select regions and cities. you can help me?
I use.
jniceit.js

Sincerely

Árpád Csikós

June 21, 2012

Hello!

I have an offer in the script at fnReplaceCheckBoxes()

$(’label[for="' + $(ctrl).attr('id') + '"]‘).bind(’click’, function () {
$(nCtrl).toggleClass(’checked’);
});

Why?
Because, the label click event triggered the normal input element click event (checkbox, radio), and the simple click event ran twice, and the designed element don’t changed.

The normal input elements click event is already treated before this function.

venkat

April 10, 2012

when i am using this script the on change events are not firing. is there a way we can retain the onchange event code which i wrote for normal html controls for the styles ones?

Paul

February 27, 2012

My textarea is broken too. It suddenly has almost zero rendered width, despite my cols=20.

Browser: IE8 in compatibility mode.

Paul

February 27, 2012

This might be cool if it worked. As soon as I apply NiceIt to my form, the only dropdown on the form breaks: my regularly-styled form has five values in its single dropdown. As soon as I add class=”NiceIt” to my form tag and refresh the page, opening the dropdown shows no values.
(By the way, you might consider adding a step three to your “How to Use” instructing the user to add the NiceIt class to each for they want to Niceify…)

Rui Cardoso

June 15, 2011

To solve the select box z-index problem in IE just add the following code to the SELECT BOX section in the css file:

.fmSelect UL LI:hover{
z-index:999999;
}

Stay Alive

May 5, 2011

I like this plugin..and it works just fine..except for the button..how can i use it with ASP.NET button control..?

Luli

February 17, 2011

Hi Guys, the plugin works fantastic until you have to deal with two or more selects one above each other.
When you click, the dropdown falls behind the other field and you can’t read the menu options.
I was trying to solve that playing with z-index but it didn’t work.
Anyone with the same problem or a nice solution?

The plugin is great, I think we all can contribute to achieve an awesome script but I don’t know why are just 3 comments.
Thanks for sharing!

Tomy

January 28, 2011

Hi, the plugin works very well, thank you so much for your contribution! :)

I have just a small issue: it’s possible to indicate an onChange event to a Select Box?
I couldn’t do it so far…
Thank you!

simon

September 30, 2010

Hi guys, just wanted to say that this is a really sweet thing that you’ve made. I can’t believe that there aren’t more comments!

Have looked through a number (of the limited few available) of “similar” solutions, but this one is in my opinion by far the best.

The default (and only?) skin is clean and appealing and looks consistent in the browsers that I have tried. I also like that you cover all form elements (annoying when people make one for checkboxes or buttons only).

Thanks for sharing this and keep up the good work :)

Darren – ajaxBlender

June 16, 2010

Hi MaksimC….thanks for the suggestion, however this will not work in IE6 and our scripts and client projects are still required to support this compatibility with the IE6 browser…well, atleast until it “officially dies” :P (we can’t wait, lol)… so in a future release, we will modify it as you have suggested. thanks again!

MaksimC

June 10, 2010

Nice plugin. I would like to recommend you to use ‘>’ CSS2 selector where it’s possible. This feature will improve rendering performance of UI widgets.

ajaxBlender.com

May 25, 2010

Thanks jochen. You make a very good point on which I can partially agree. At first as a web developer I believe that generic controls are much better than custom ones. But secondly, the overall look and feel of the end website or web application is done by designers. And according to our internal stats, for every 100 custom web projects, there are at least 20 or so which will require custom textboxes, dropdown menus, textareas, checkboxes, etc. Not just because it is a designer’s fancy, but because objectively, a custom UI looks much better with the design. The jNiceIt script has been developed especially for this purpose. We don’t say you must use it. We just say when designer wants a custom UI, you don’t have any other choice. :p

So, the main reason we “re-invented the wheel” is that from time to time during development projects, we are forced to work with a fixed layout (from the client). But then a custom UI is requested by the client for the page with a fluid width. At this point, all known JavaScript skinning libraries are a pain to work with. They just do not render the layout properly when the browser’s window gets resized. Therefore, we created our own library for this and share with you for free use. :)

Thanks,

Alex

jochen

April 7, 2010

I would not recommend to bend browser controls to such extend. Even for experienced users, juggling with vast variations of form designs — and differing behaviousr — it leads only to reduced usability.

One example: the dropdown menu in “before” selected, go ahead and type V or arrow keys. As you’ll see (on a win platform, at least) it helps you to navigate trough the entries. Try that with the ‘after’ example. which is better?

Leave a comment

Your name

August 28, 2014

Spam protection. Enter result of expression you see in the box below.

8 + 4 =