Try to improve the style of the input type=file

This commit is contained in:
James Mills 2020-03-22 22:31:22 +10:00
parent aa15a59118
commit ce82e9b147
No known key found for this signature in database
GPG key ID: AC4C014F1440EBD6
3 changed files with 42 additions and 10 deletions

File diff suppressed because one or more lines are too long

View file

@ -302,3 +302,33 @@ input[type=button] {
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee')";
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;
}

View file

@ -2,8 +2,10 @@
<div id="upload">
<form id="upload_form" enctype="multipart/form-data" method="POST" action="/upload">
<div>
<div><label for="video_file">Please select video file</label></div>
<div><input type="file" name="video_file" id="video_file" accept="video/*" onchange="fileSelected();" /></div>
<label class="filebutton">
Select a video to upload...
<span><input type="file" name="video_file" id="video_file" accept="video/*" onchange="fileSelected();" /></span>
</label>
</div>
<div>