I want to replace the InputFile's rectangle with 'attach Icon'. I tried to set the URL of the icon to 'background-image' of InputFile but it had no effect. This only demonstrates how to change the color of InputFile, not exactly what I need.
2
-
1stackoverflow.com/a/25825731/437393 Make your input transparent, e.g. opacity = 0, create another control, e.g. label, that will redirect click to your input. Apply some styles to label.Anonymous– Anonymous2021-06-08 15:35:02 +00:00Commented Jun 8, 2021 at 15:35
-
@Anonymous Worked! Thanks.ArashV– ArashV2021-06-09 06:50:32 +00:00Commented Jun 9, 2021 at 6:50
Add a comment
|
3 Answers
I use something similar for a colour picker.
<label for="fileinput" class="label-wrapper">
<span class="oi oi-paperclip"></span>
<InputFile id="fileinput" class="custom-input-hide" />
</label>
<style>
.label-wrapper:hover {
cursor: pointer;
}
.custom-input-hide {
width: 0;
height: 0;
overflow: hidden;
}
</style>
1 Comment
Jason D
Thanks for posting this solution and for sharing that online resource. It looks nice for prototyping.
I think maybe this is what you are looking for.
HTML/Razor code
<div class="file-input-zone">
<InputFile />
</div>
CSS
<style>
.file-input-zone {
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
color: black;
cursor: pointer;
position: relative;
width: 120px;
height: 120px;
background-image: url('paper-clip.png');
}
.file-input-zone:hover {
background-color: lightblue;
}
.file-input-zone input[type=file] {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
</style>
In the CSS code above, the file paper-clip.png is installed in wwwroot directory.
The button will look like a transparent paper-clip. In the image below, color changes on hover as well.
Comments
Try this:
<label for="inputFile" class="btn btn-secondary me-1">
<InputFile id="inputFile" OnChange="@LoadFiles" class="d-none" />
Upload File
</label>
CSS Classes from bootstrap, included by default in the Blazor templates.
