Skip to content

Instantly share code, notes, and snippets.

@lukasborawski
Last active December 11, 2015 08:18
Show Gist options
  • Save lukasborawski/4572003 to your computer and use it in GitHub Desktop.
Save lukasborawski/4572003 to your computer and use it in GitHub Desktop.
Input[type="file"] concept.
<section class="content">
<div class="file_input_add_file box_matched">
<h4>Select file from your hard drive.</h4>
<fieldset class="add_file">
<label class="">
<input type="text" placeholder="the path to your file" class="file_name_field box_matched">
<span class="file_error_info">you did not select any file</span>
</label>
</fieldset>
<fieldset class="add_file">
<input type="file" value="select the file" class="add_file_field">
<span>browse</span>
</fieldset>
</div>
</section>
.content {
width: 100%;
margin: 0 auto;
text-align: center;
}
.head h1 {
font-family: 'Tahoma', Verdana, Arial, san-serif;
}
.head h4 {
position: absolute;
font-size: 40%;
color: #b0b0b0;
right: 180px; top: 91px;
text-shadow: none;
font-weight: normal;
display: inline-block;
font-family: Georgia, Tahoma, Verdana, sans-serif;
}
.file_input_add_file {
position: relative;
width: 100%;
margin-top: 50px;
margin-bottom: 150px;
}
.file_input_add_file h4 {
font-weight: normal;
}
.file_input_add_file fieldset {
border: none;
display: inline-block;
position: relative;
padding: 0; margin: 0;
margin-top: 10px;
height: 36px;
vertical-align: top;
}
input[type="file"].add_file_field {
font-size: 20px;
filter: alpha(opacity=1);
-moz-opacity: 0.01;
opacity: 0.01;
cursor: pointer;
height: 36px;
position: absolute;
right: 0; top: 0;
z-index: 2;
}
.file_input_add_file fieldset span {
cursor: pointer;
font-size: 80%;
padding: 0 10px;
height: 100%;
line-height: 36px;
background-color: black;
border: none;
z-index: 1;
color: white;
box-shadow: 0 0 20px #B6B6B6;
display: inline-block;
vertical-align: bottom;
margin-top: 1px;
}
input[type="text"].file_name_field {
outline: 0 none;
border: 1px solid #ccc;
display: inline-block;
box-shadow: 0 0 20px #B6B6B6;
width: 402px; height: 100%;
padding: 0 8px;
position: relative;
z-index: 3;
font-size: 75%;
font-family: inherit;
color: #808080;
background-color: #f6f3f3;
}
input[type="text"].file_name_field {
overflow: visible;
}
.add_file label.file_error .file_error_info {
visibility: visible;
}
.add_file label.file_error input[type="text"].file_name_field {
border-color: red;
}
.file_input_add_file fieldset .file_error_info {
position: absolute;
font-size: 70%;
width: auto;
z-index: 2;
visibility: hidden;
height: 20px; line-height: 20px;
bottom: -20px; right: 0;
background-color: red;
}
.file_input_add_file fieldset .file_error_info:before {
content: "";
position: absolute;
left: -16px; top: 0;
width: 0; height: 0;
border-style: solid;
border-width: 0 16px 20px 0;
border-color: transparent red transparent transparent;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment