如何樣式化HTML提交表單？

-1

<form action="upload.php" method="post" enctype="multipart/form-data"> 
<input type="file" name="filetoupload" id="filetoupload" onchange="this.form.submit();"> 
</form>

它使一個「選擇文件」按鈕，選擇要上傳的文件，但如何在CSS做款式此按鈕，出現更改顏色，大小，位置和字體？

我已經試過input[type=submit] {}但似乎並沒有工作

另外，我怎麼可以改變從「選擇文件」到「上傳」按鈕的話嗎？

來源

2014-12-20 nickelton6

該類型是file，不submit，通過type="file"所示：

input[type=file] { 
    /* styles here */ 
}

樣式化按鈕，但是，是複雜的。正如this answer中所解釋的那樣，您必須將實際輸入字段移出視圖，然後添加具有您自己樣式的按鈕。

來源

2014-12-20 03:06:45

噢，對不起，這是一個愚蠢的錯誤:)不過我已經改變了CSS爲type =文件，而不是，但它只是編輯按鈕周圍，而不是實際的按鈕空間，例如顏色適用於按鈕周圍，但不適用於此 – nickelton6

請參閱我的編輯。不幸的是，你想要做的事情非常棘手，需要CSS和JavaScript的組合來獲得所需的行爲。 –

你錯過了file，您是submit創建的風格，你有input type="file"：

input[type=file] { 
    /* styles here */ 
}

而對於第二個，要改變從「選擇文件」到「上傳」按鈕的話，加屬性value="Upload"

<input type="file" name="filetoupload" id="filetoupload" value="Upload" onchange="this.form.submit();">

來源

2014-12-20 03:10:56

謝謝，但我已經改變了，它仍然說選擇文件。新代碼是 – nickelton6

http://www.quirksmode.org/ DOM/inputfile.html –

這很難做到。如果您可以使用jQuery，請嘗試將這些代碼扔在一起。

$('input[type="file"]').change(function() { 
 

 
    var value = $(this).val(); 
 

 
    var value = value.replace("C:\\fakepath\\", "") 
 

 
    if (value) { 
 
    $(this).siblings('#fileName').html(value); 
 
    } else { 
 

 
    $(this).siblings('#fileName').html('upload'); 
 

 
    } 
 

 
});

input[type=file] { 
 
    display: none; 
 
} 
 
label { 
 
    cursor: pointer; 
 
} 
 
label > span { 
 
    border: 1px solid black; 
 
    padding: 5px; 
 
    border-radius: 5px; 
 
    background: white; 
 
    color: black; 
 
    transition: background 0.5s, color 0.5s; 
 
} 
 
label > span:hover { 
 
    background: black; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="upload.php" method="post" enctype="multipart/form-data"> 
 
    <label> 
 
    <input type="file" name="filetoupload" id="filetoupload" onchange="this.form.submit();"><span id="fileName">upload</span> 
 
    </label> 
 
</form>

來源

2014-12-20 03:43:49

如何樣式化HTML提交表單？

回答

相關問題