自定义表单元素样式

Question

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

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

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

Answer 1

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

你只需了解一些技巧（比如你看到的select-file元素）， 这些技巧只涉及用你创建的div覆盖不可设置的元素。

使用jquery / css快速学习如何将这些div放在非样式元素之上，一旦完成，它将在所有浏览器中相同，但是与select文件元素有一点点差别。我已经给出了我使用的必要的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>

抱歉打字错误，我得赶紧

Answer 2

你应该尝试基础css前端框架 应该为你做的伎俩 http://foundation.zurb.com/docs/forms.php

Answer 3

如果您了解Jquery的方法，那么这是创建自定义元素的最佳方式。

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

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