自定义表单元素样式

Question

I want to make some custom form elements. Which is the best library to use to make custom form elements ?

Mainly i am looking at File upload and Select Box.

The rest of the set i can style it in CSS3.

Answer 1

Harsha bhai try making your own design, it will be a good learning experience, because it is easy

You just have to understand few tricks (like for the choose-file element that you see), these tricks just involve overlaying the non-stylable elements with divs that you create.

Use jquery/css for quikly learning how to position these divs on top of non-stylable elements, once this is done it will be fairly same across all browsers, but there is a slight difference like for the choose file element. I have given the necessary html,jquery that I use, if you have any doubt you can ask another question.

 $(function(){
  $('div#input_file_outer input[type=file]').change(function(e){
    $('div.file_name').html($('div#input_file_outer input[type=file]').val()); });
    $('div#input_file_outer input[type=file]').css({'cursor':'pointer'});

    if($.browser.opera) {
      $('div.file_name').css({'float':'left'});
      $('span.input_file_label').css({'float':'right','cursor':'pointer'});
    }
    if(!$.browser.opera) {
      $('span.input_file_label').css({'left':'-4px'});
    }
    $("div.input_file_cover,div#input_file_outer").css( { 'width':$("input.upload_file").outerWidth()+9+'px', 'height':$("input.upload_file").outerHeight()+2+'px', 'cursor':'pointer' });
    $("div.file_name,span.input_file_label").css( { 'height':$("input.upload_file").outerHeight()+'px', 'cursor':'pointer' });
  });

<input type="file" name="photograph" class="upload_file" title="Upload your jpeg/jpg photographs" style="cursor: pointer; ">

<div class="input_file_cover" style="width: 249px; height: 23px; cursor: pointer; ">
  <span class="input_file_label" style="left: -4px; height: 21px; cursor: pointer; ">
    Choose File
  </span>
  <div class="file_name" style="height: 21px; cursor: pointer; ">
    File name
  </div>
</div>

Sorry for typos, I have to rush

Answer 2

您应该尝试基础CSS前端框架应该为您解决问题http://foundation.zurb.com/docs/forms.php

Answer 3

If you know your way around Jquery, that is the best way to create custom elements.

For custom select buttons I'd suggest using the Jquery library customSelect . It lets you create select elements with a variety of things like text boxes inside of the select, radials, etc.

If you want a prebuilt fancy looking file upload with a progress bar, I'd suggest using FancyUpload