html - 自定义表单元素样式

Question

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

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

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

Answer 1

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

你只需要了解一些技巧(比如你看到的 choose-file 元素)，这些技巧只涉及用您创建的 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>

不好意思打错了，我得赶时间了