Demo

Watch all elements being styled by custom form elements

Check form variables

Postvariables:

array(0) { }

Files

array(0) { }

The form

Checkboxes (input[checkbox])
Checkboxes with implicit labelling

NOTE: 3rd Checkbox has dependencies: 1st and 2nd get automatically checked if not already

Checkboxes without labelling
Radiobuttons (input[radio])
Radiobuttons with implicit labelling
Radiobuttons without labelling
Textinput&-area(input[text,password],textarea)- w/ slidingDoors
  • trigger textfield 4 disabled/enabled
  • trigger textarea 2 disabled/enabled
Textinput&-area with implicit labelling
Selectfield (select) with and without multiple option and preselected
  • trigger select 3 disabled/enabled
  • trigger multiple select 2 disabled/enabled
file upload (input[file]) -- without and with implicit labelling
Check POST Data or Reset Data via Buttons (input[submit], input[reset])
input[image] (State-Images are preloaded (depends on mootools Assets)
Combined example: Search field

Epilogue

a note from the author

You've come this far and are now (hopefully) convinced, that custom form elements is the form library that fits your needs. It is in fact highly customizable, allows you to style file upload, select and any type of buttons plus all other form elements with css and still maintains the usability and accessibility of every form element. Also, it doesn't interfere with other javascripts like form validation.

You may now like to download custom form elements.

  • Zivko

    This could use some redesigning…I am searching fore some cross-browser solution for a web app, and I think I’ll take a bite at it.

    Thanks for the effort :)

    • mediavrog

      glad you like my work. if you’re into open source you may want to share your findings with me :) kind regards, maik

  • disappointeduser

    it doesn’t work in IE 7 properly.

    • mediavrog

      hey dissapointed user -.-

      please note that this is free software in version < 1, so still under development. you’re free to leave constructive critisism as bugreport with detailed information…
      regards, maik

  • Obelix

    submit, reset buttons and textarea are broken in IE6 :(

  • Samuel

    Hmmm… I’m very exciting by this, but after many hour of trying, the select module doesn’t work fine. The options list shifts to the right and bottom on the two browsers IE 7 and Firefox. I don’t understand why.

    • mediavrog

      hey there, please read my reply to brian. the select fields handling ought to be improved… meanwhile you may check if you can eliminate the offset with css or you’re free to leave a bug report. thanks, maik

  • brian

    For the Selectfield can the drop-down disappear on a “roll-off” as opposed to staying up until you click on something else? Also can you use multiple Selectields with different widths on the same page?

    • mediavrog

      Hi there,
      selectfields are still somewhat buggy and i’ve got to improve the script. the “hide on roll of”-feature isn’t the way browsers implement it, so it’s not natively supported. BUT you may have a look at the custom events for cfe replaced form items and hook into the mechanism. if theres no way to accomplish it without hacking the cfe, please leave a bug report or feature request on sourceforge. thanks, maik

  • jozefs

    BEFORE YOU USE THIS SCRIPT look what’s happening with text fields, selects and buttons on ie6 – this is ridiculous! It makes it unusable.

    • Anonymous

      And Why dont you fix the “bugs” instead of just say “this doesnt work”? And I remember you that IE6 is a bug in itself, because it doesnt obey standards so the autor has no need to fix the “bugs”… And if this don’t like it you can simply look around for another script.

      Regards.

      • Guest

        IE6? IE8 is coming out dude! keep urself up to date…

    • Guest

      Hey look moron, I guess you still don’t get it, ITS A FREE SOFTWARE, go back see what the bugs are and report back.

  • jozefs

    Does NOT work properly in ie6.

    • mediavrog

      OK I am quite aware of the bugs in IE 6 but please note that this is free software and still under development. If you find bugs please let me know (see sourceforge bugtracker). Meanwhile you may still consider disabling the script for IE6 with conditional comments.
      Regards Maik

    • Guest

      You still support IE6?

      • mediavrog

        no – ie 6 will not be supported any longer by the developer. BUT as this project is open source anybody may provide patches or hacks to make it work under ie 6.

  • Anonymous

    Very nice work!

    • mediavrog

      thanks

  • Guest

    the select field is hidden after the first selection

  • Guest

    great work but i dont know how to use it the method provided by you guys doesnt apply on my side.

    • Guest

      hooh

      • Guest

        ok

    • mediavrog

      Hey there,

      sorry that it doesn`t work for you, but please tell me what the excact problem is, otherwise theres no point i can start investigating. i offer you to write me an email and provide me with a demo link.

      regards,
      maik

      • Guest

        Hello,

        is there any more information on how to actually use this, i have all the files on my server in the correct directories, what do i have to do with my form for it to work?

        • mediavrog

          Actually you dont have to modify your form for cfe to work. Just insert the javascript and css files in your html doc or whatever and customize cfe.autostart.js. Refer to HowTo on this page for forther information.

    • mediavrog

      this is for all ppl where cfe isn’t replacing the form elements out-of-the-box: please look into cfe/base/cfe.replace.autostart.js and uncomment the “scope: $(‘form’)” or pass your own form element.

    • Eddi Weber

      Nice Work!
      please, let me (JS noob) know how to male the script work only für a css class called .searcher
      scope? Sorry but i am a german designer but no JS-progger.

      Would be glad ti hear from jou

  • Eddi Weber

    hi,
    can you tell me in understandable Words (i am german) how to make your great Script work only for one specific CSS Class that wraps a form element.

    I mean only the form in
    <div class=”searcher”>
    my form
    </div>
    should be styled with your script. All the other forms of my page must be original.

    I will donate some bugs for your help

    • mediavrog

      Hey there,

      have a look at cfe/base/cfe.replace.autostart.js :

      You’ll find a line which says:
      //initialize cfe
      followed by myCFE.init({scope: $(‘form’)});

      the $(‘form’) selected an element with an attribute id=”form”.
      I’d recommend the use of an ID att for your purposes, anyway if you want to style the form elements contained in a div with class=”searcher”, you’d have to change the initialization to:

      scope: $$(‘.searcher’)[0]

      Note: $$(‘.searcher’) looks for all elements with class=”searcher” and returns an array of them, even if just 11 item is found. to select the single div, [0] is appended.

      Kind regards,
      maik

      P.S. i’m planning a wizard, which will guide to thacrough the setup process without programming knowledge :)

      • Eddi Weber

        Thank you for your Help, i used the Donation Button, hope it helps a litthe for the evolution of your CFE, Greetings from Ger.

      • Eddi Weber

        Hi,

        myCfe.init({
        //theme: “basic”, currently not supported
        scope: $(‘.searcher’)[0]
        });

        is not working, with This Code the cfe is not aplying on any form,
        i need to turn of the cfe for the “Farbe” select in the Body:
        http://www.iphonescout.de/_py-iPhone-Taschen-iPhone-3G-Pouch-schwarz/a-503-32-0-0-0-0/

        can you help me with this thing?

        Greetings from Germany

      • Guest

        can someone give me rison y the module doesnt work. here the code
        <html>
        <head>
        <!– add css –>

        <link rel=”stylesheet” type=”text/css” href=”css/cfe.css”/>
        <!–[if IE]> <link rel=”stylesheet” type=”text/css” href=”css/fixPrematureIE.css”/> <![endif]–>
        </head>

        <body>
        <form method=”post” action=”" style=”margin: 0px; padding: 0px;” id=”form”>

        <input type=”file” name=”filetest” id=”form”>

        </form>

        <!– add cfe base –>
        <script type=”text/javascript” src=”cfe/base/cfe.base.js”></script>
        <!– add cfe replacement script –>
        <script type=”text/javascript” src=”cfe/base/cfe.replace.js”></script>

        <!– add modules –>
        <script type=”text/javascript” src=”cfe/modules/cfe.module.file.js”></script>

        <!– add addons –>
        <script type=”text/javascript” src=”cfe/addons/cfe.addon.toolTips.js”></script>
        <script type=”text/javascript” src=”cfe/addons/cfe.addon.dependencies.js”></script>

        <!– autostart replacement : have a look into and customize it if you want –>
        <script type=”text/javascript” src=”cfe/base/cfe.replace.autostart.js”></script>

        </body>
        </html>

        tanks in advance

      • Guest

        can you add a demopage on your latest version..??

        sori newbie here..

        tnks in advance

  • Oliver Bachmann

    Hello,
    can you make an example that contains several different images on the left side in a select box? I am using ElSelect at the moment for this, but the size of the select box is getting too long.

    • mediavrog

      Hi there,

      you may use the generated option-css-classes for this. Each option has it’s own jsOptionXX class (replace xx with incrementing number). In you CSS you can give them background-images like: .jsOption1{background-image: url(yourImage); Hope this helps

    • mediavrog

      For your convenience, i implemented this feature > see “Normal select box 2″ on the demopage.
      (Basically it just copies the classes from the original option elements > style it on your own please :) )

  • mediavrog

    $ $(‘.searcher’)[0] (without the white-space)

    • neuz8

      scope:$$(‘.searcher’)[0]
      Thats It! Thank you!

  • Guest

    I would like to use cfe to dislay selects that are dynamically created.
    Is there a way to :
    1) make the width of the select box automatically fit with the width of the options ?

    2) In my cfe selects, if I want to trigger the onchange event, , I have to select one option AND THEN to click outside the select.
    Is there a way to triger the onchange event as soon as you have selected an option ?

    • mediavrog

      The auto-width feature made my brain twist quite a few times :) The onchange trigger shouldn’t be that hard to implement; i’ll look into this :) Fr more information/help please use the forums

  • phazei

    Can’t wait for a jQuery version!!!! :D :D:D

  • Anonymous

    bug with attributes readonly=”readonly” on checkbox

  • MiggyMan

    I’m having a problem with the select box, it’s expanding to fill the width of a div that’s the container of the div the select box is inside

    <div>
    <div>
    <select></select>
    </div>
    </div>

    The select box has it’s size set css however it always expands well beyond the set size!

    I see in the example you have different size selects however after looking at the source i can’t figure out how you’re making them differ in size ?

  • MiggyMan

    Wait, i get it, jsSelectorX isn’t assigned based on size etc but simply the order they’re created!

    • mediavrog

      Yes, you’re right; jsSelectorX is to distinguish one selector from another

  • Anonymous

    Hi, I’m new with javascript and have a tiny bit of experience with jquery and none with mootools – for a beginner, no plain demo within the download files is quite daunting and although i have tried to incorporate all required css, image and javascript files my form isnt being styled at all.. does anyone have a very plain html example of this being used? :S please drop me an email if you like – emmaburge@live.co.uk

  • Dirshah

    Is it free?

    • http://mediavrog.net/blog/ Maik [Mediavrog]

      Its free.

  • Dirshah

    T he demos in the download package does not run.

    • http://mediavrog.net/blog/ Maik [Mediavrog]

      Sorry for the inconvenience. Ill look into this again

  • Pingback: List of 40+ HTML Form Elements Customization Techniques | NetWaver

  • Wilt

    Too bad. Lost me, because selectfield on this page doesn’t work on Chrome…
    and Firefox. Checkboxes rendering fails on firefox too. Right side is missing and check sign is not showing.
    I suggest people to move on to the next library.