ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add a file input with styling for the image upload

This commit is contained in:
Ramon Wenger 2018-09-07 13:46:18 +02:00
parent 186eab6253
commit 459d275f87
1 changed files with 23 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
client/src/components/content-forms/ImageForm.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div class="image-form"> <div class="image-form">
<h1>Image Form</h1> <input id="image-input" type="file" class="image-form__file-input">
<label class="image-form__button" for="image-input">Bild vom Computer hochladen</label>
</div> </div>
</template> </template>
@ -11,5 +12,26 @@
@import "@/styles/_variables.scss"; @import "@/styles/_variables.scss";
.image-form { .image-form {
&__file-input {
width: 0.1px;
height: 0.1px;
overflow: hidden;
opacity: 0;
position: absolute;
z-index: -1;
& + label {
cursor: pointer;
background-color: $color-lightgrey;
height: 150px;
display: flex;
width: 100%;
justify-content: center;
align-items: center;
font-family: $sans-serif-font-family;
font-weight: 500;
text-decoration: underline;
}
}
} }
</style> </style>