自定義表單元素樣式

我想製作一些自定義表單元素。哪一個是用來製作自定義表單元素的最好的庫？自定義表單元素樣式

主要我在看文件上傳和選擇框。

其餘的我可以在CSS3中設置它。

來源

2012-08-11 Harsha M V

你的意思是自定義表單元素？你的意思是自定義樣式，還是你想創建一個新類型的元素？ – 2012-08-11 10:14:30

自定義樣式對不起：D – 2012-08-11 10:17:25

一些元素可以自定義，但一些不是，我想要自定義所有元素，那麼它是不可能的，沒有使用JS，使用js的一些元素定製通過谷歌搜索:) – Chandrakant 2012-08-11 10:20:31

Choose-file element

戒BHAI嘗試使自己的設計，這將是一個很好的學習經驗，因爲它很容易

你只需要瞭解一些技巧（像你看到一個選擇文件元素），這些技巧只涉及用您創建的div覆蓋非可設置元素。

使用jquery/css來快速學習如何將這些div放置在非可風化元素的頂部，一旦完成，它將在所有瀏覽器中都相當一致，但是與choose文件元素存在細微差別。我已經提供了必要的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-11 15:19:30 GLES

你能否提供給我更多相關信息。你有一個演示一些樣式/圖像 – 2012-08-14 11:49:51

黃色的東西是頁面的背景，灰色是放置在上傳按鈕頂部的div的背景顏色，記得工作很慢，這個，它會幫助你學習jquery/javascript + css – GLES 2012-08-14 12:15:47

，記住在開始工作之前試着改變web上傳的形式，比如上傳，然後慢慢開始移動div（靠近表單按鈕）靠近，並且因爲減少了不透明度的按鈕，你會看到按鈕和divs – GLES 2012-08-14 12:17:10

你應該嘗試的基礎CSS前端框架應該做的伎倆爲您 http://foundation.zurb.com/docs/forms.php

來源

2012-08-11 10:23:38

如果您發現您的jQuery的辦法，那就是創建自定義元素的最佳途徑。

對於自定義選擇按鈕，我建議使用Jquery庫customSelect。它可以讓你創建中選擇元素，與各種各樣的東西如文本框的選擇，子午線輪胎的內側等

如果你想有一個預建看中尋找文件上傳帶進度條，我會使用建議FancyUpload

來源

2012-08-11 10:25:08

自定義表單元素樣式

回答

相關問題