HTML/CSS 表單樣式

Question

我正在嘗試創建一個文件共享網站，但是在為我的上傳表單設置樣式時遇到了麻煩，因為我的設計非常先進，而不是設置個人樣式，我正在嘗試將設計設置為背景圖像。

這是我的設計 - 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

}

你知道我如何使用圖像來設計我的其他表單按鈕的樣式嗎？

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

Answer 1

樣式化一些表單元素很糟糕，不幸的是，文件元素就是這些元素之一。 這是因為瀏覽器實際上是從操作系統派生控件本身（這意味着您完全無法控制它的外觀）。 這對您來說意味着，為了設置樣式，您將需要 JavaScript 和一些 CSS hackary。

Quirksmode 有一個很好的一步一步來做，至少讓你開始。

但是，其中的基礎知識是：

1. 使用position: relative普通文件輸入的樣式。
2. 添加一個新的純舊文本輸入並將其放置在文件輸入的頂部。
3. 將文本輸入設置為看起來像文件輸入
4. 將文件輸入的opacity設為 0，使其不可見，但仍可點擊（這是關鍵，因為您實際上仍在使用文件輸入）
5. 使用 JavaScript 將文件名放入文本輸入

這是一種原始的，不是很符合標准（額外的元素等等）。 如果您已經在使用 JavaScript 庫（jQuery、MooTools 等），您可能會找到一個可以處理控件本身的插件，您只需為其添加樣式即可。 這種方法的優點是您不一定需要自己添加額外的元素（因此您不會有一個雜散的input字段），並且 JavaScript（理想情況下）會獲取您的文件輸入的存在並相應地“修復”它們。

Answer 2

對於樣式瀏覽按鈕，您需要借助 css-javascript duo 或類似twitter bootstrap 之類的東西，它可以開箱即用1 .. 另外， 請查看這篇文章和這篇文章

作為個人觀點，我覺得像瀏覽按鈕和下拉菜單這樣的表單元素不應該做太多調整..給出兩個好處..一個，更快的開發..第二個，跨瀏覽器對稱..