我想用“附加图标”替换 InputFile 的矩形。我尝试将图标的 URL 设置为 InputFile 的“背景图像”,但没有效果。 这仅演示了如何更改 InputFile 的颜色,而不是我需要的。
问问题
766 次
2 回答
3
我将类似的东西用于颜色选择器。
<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>
于 2021-06-08T21:31:37.770 回答
1
我想也许这就是你要找的。
HTML/Razor 代码
<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>
在上面的 CSS 代码中,文件 paper-clip.png 安装在 wwwroot 目录中。
该按钮看起来像一个透明的回形针。在下图中,悬停时颜色也会发生变化。
于 2021-06-08T16:56:00.687 回答