Try to improve the style of the input type=file
This commit is contained in:
parent
aa15a59118
commit
ce82e9b147
3 changed files with 42 additions and 10 deletions
File diff suppressed because one or more lines are too long
|
@ -302,3 +302,33 @@ input[type=button] {
|
||||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee')";
|
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee')";
|
||||||
background: linear-gradient(#000000, #1e1e1e);
|
background: linear-gradient(#000000, #1e1e1e);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fileContainer {
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
label.filebutton {
|
||||||
|
width:120px;
|
||||||
|
height:40px;
|
||||||
|
overflow:hidden;
|
||||||
|
position:relative;
|
||||||
|
background:linear-gradient(#000000, #1e1e1e);
|
||||||
|
box-shadow: 0 0 5px #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
label span input {
|
||||||
|
z-index: 999;
|
||||||
|
line-height: 0;
|
||||||
|
font-size: 50px;
|
||||||
|
position: absolute;
|
||||||
|
top: -2px;
|
||||||
|
left: -700px;
|
||||||
|
opacity: 0;
|
||||||
|
filter: alpha(opacity = 0);
|
||||||
|
-ms-filter: "alpha(opacity=0)";
|
||||||
|
cursor: pointer;
|
||||||
|
_cursor: hand;
|
||||||
|
margin: 0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
|
|
@ -2,8 +2,10 @@
|
||||||
<div id="upload">
|
<div id="upload">
|
||||||
<form id="upload_form" enctype="multipart/form-data" method="POST" action="/upload">
|
<form id="upload_form" enctype="multipart/form-data" method="POST" action="/upload">
|
||||||
<div>
|
<div>
|
||||||
<div><label for="video_file">Please select video file</label></div>
|
<label class="filebutton">
|
||||||
<div><input type="file" name="video_file" id="video_file" accept="video/*" onchange="fileSelected();" /></div>
|
Select a video to upload...
|
||||||
|
<span><input type="file" name="video_file" id="video_file" accept="video/*" onchange="fileSelected();" /></span>
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
|
|
Loading…
Reference in a new issue