HTML/CSS表單樣式

我試圖做一個文件共享網站，但有麻煩的樣式上傳形式我有我的設計是相當先進的，而不是設置個人風格我試圖設置設計爲背景圖。HTML/CSS表單樣式

這是我設計的 - http://icap.me/i/s5YIbheY3g.png

這是它目前的努力 - http://icap.me/i/ODuzJOQMhS.png

到目前爲止，我用下面的代碼設置上傳按鈕的風格 -

form input[type=submit] { 
background : url("../img/upload.png") no-repeat center center; 
width : 115px; 
height :52px; 
border : none; 
color : transparent; 
font-size : 0

}

你知道我怎麼可以使用圖像來設計我的其他表單按鈕，這裏是html -

  <form action="upload_file.php" method="post"enctype="multipart/form-data"> 
     <input type="file" name="file" id="file" /> 
     <br /> 
     <input type="submit" name="submit" value="Submit" /> 
     <input type="checkbox" name="vehicle" value="Bike">I agree to the terms and conditions<br> 
     </form>

來源

2012-11-13 SamXronn

造型某些表單元素吸引，不幸的是，文件元素是其中的一個元素。這是因爲瀏覽器實際上是從操作系統派生出控制本身（這意味着你完全無法控制它的外觀）。這對你來說意味着，爲了設計它，你需要JavaScript和一些CSS的詭計。

Quirksmode has a great step by step這樣做，至少讓你開始。

它的基礎知識，雖然是：與position: relative

風格正常文件輸入。
添加一個新的普通舊文本輸入並將其放在文件輸入的頂部。
樣式的文本輸入看上去像文件輸入
刪除該文件輸入的opacity爲0，所以它的看不見的，但仍然可以點擊（這是關鍵，因爲你居然還在使用文件輸入）
使用JavaScript把文件名到文本輸入

這一次的那種原始而不是非常標準的（多餘的元素和所有）。如果您已經在使用JavaScript庫（jQuery，MooTools等），您可以找到一個可以處理控件本身的插件，並且只需添加樣式即可。這種方法的好處是，你不一定需要自己添加額外的元素（所以你沒有一個雜亂的input字段），JavaScript（理想情況下）拿起你的文件輸入的存在，並相應地「修復」它們。

來源

2012-11-13 15:21:19 Shauna

對於造型瀏覽按鈕，你需要採取的CSS的JavaScript Duo或類似twitter bootstrap剛剛開箱1的幫助.. 此外，check this post和this article

作爲一個個人的觀點，我覺得表單元素，如瀏覽按鈕和下拉菜單不應該調整太多..給出兩個好處..一，更快的發展..和兩個，跨瀏覽器對稱..

來源

2012-11-13 16:03:05

HTML/CSS表單樣式

回答

相關問題