當使用瀏覽器Chrome,遇到<input type=""file"....>的檔案選取欄位時,該選取檔案的按鈕會出現在Textbox的最左側,與IE出現在右側是完全相反,看起來有點不習慣。
下列css可讓選取檔案的按鈕,無論是哪一種瀏覽器,均出現在Textbox的右側。

<html>
<head>
<title></title>
<style type="text/css">
.f_class
{
width: 220px; height: 20px; margin: 0; border: 1px solid #777; float: left; -webkit-box-sizing: border-box; color:Black;
}
input[type="file"].f_class::-webkit-file-upload-button
{
float: right; position: relative; top: -1px; right: -1px;
}
</style>
</head>
<body bgcolor="#ffffff">
<form id="form1" runat="server">
<input id="FileInput" type="file" name="FileInput" style="background-color: #FFF8C0;" class="f_class" />
</form>
</body>
</html>
全站熱搜