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 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.


  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");

<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'

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!


September 17, 2014

Hi Nick,

Thanks for your comment. It’s a good suggestion. We may be adding some updates in the future, but I don’t have a ETA on it. I’ve added this to the list of possible improvements.

Thanks again,



September 15, 2014

Your plugin came included with a template I bought, the most disappointing thing about your plugin is the lack of support for a “change” event. It would have been nice if your plugin bubbled up the change event using “trigger” or “change”.


April 21, 2014

Hi Giuseppe,

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




April 19, 2014

I want to create a dynamic select regions and cities. you can help me?
I use.


Árpád Csikós

June 21, 2012


I have an offer in the script at fnReplaceCheckBoxes()

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

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.


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?


February 27, 2012

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

Browser: IE8 in compatibility mode.


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{

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..?


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!


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!


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!


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.


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. :)




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

July 21, 2017

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

1 + 5 =