0

我想做一些自定义表单元素。哪个是用于制作自定义表单元素的最佳库？

主要是我在看文件上传和选择框。

其余部分我可以在 CSS3 中设置样式。

4

3 回答 3

3

选择文件元素

Harsha bhai 尝试制作自己的设计，这将是一次很好的学习体验，因为它很容易

你只需要了解一些技巧（比如你看到的选择文件元素），这些技巧只涉及用你创建的 div 覆盖不可样式化的元素。

使用 jquery/css 快速学习如何将这些 div 放置在不可样式化的元素之上，一旦完成，它在所有浏览器中将是完全相同的，但对于选择文件元素来说，会有一些细微的差别。我已经给出了我使用的必要的 html，jquery，如果你有任何疑问，你可以问另一个问题。

 $(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>

抱歉有错别字，我得着急

于 2012-08-11T15:19:30.530 回答
2

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

于 2012-08-11T10:23:38.740 回答
1

如果您熟悉 Jquery，那是创建自定义元素的最佳方式。

对于自定义选择按钮，我建议使用 Jquery 库customSelect。它允许您使用各种内容创建选择元素，例如选择内的文本框、径向线等。

如果您想要一个带有进度条的预建精美文件上传，我建议使用FancyUpload

于 2012-08-11T10:25:08.753 回答