當使用瀏覽器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>

arrow
arrow
    全站熱搜

    adamschen9921 發表在 痞客邦 留言(0) 人氣()