gpt4 book ai didi

javascript - 如何将html5输入按钮转换为div标签?

转载 作者:行者123 更新时间:2023-11-28 03:23:58 25 4
gpt4 key购买 nike

在我的 html5 代码中,我使用这个标签来选择要读取的文件。

<input type="file" id="files" name="files[]" multiple />

但这有一个浏览按钮,我想将它更改为一个可能的 div 标签,这样它就只是一个可点击的元素。我不想看到旁边显示文本的默认浏览按钮。

有没有一种 css 方法可以改变它,所以我看不到按钮,但我仍然可以点击它,或者我只需要隐藏它,让其他东西可以点击,只需手动点击它,当点击了吗?

最佳答案

这是我一直以来使用标签包装输入的方式:fiddle

HTML

<label for="upload-file" class="upload-wrapper">
<input id="upload-file" type="file" />
<img src="http://www.wikiprogress.org/images//Icon_UploadPapers.png" alt="" />
</label>

SCSS

.upload-wrapper {
display: block;
position: relative;
overflow: hidden;
border-radius: 50%;
input[type="file"] {
position: absolute;
top: 0;
left: 0;
height: 0;
width: 0;
opacity: .5;
&:focus {
outline: 0;
}
}
max-width: 10em;
img {
display: block;
width: 100%;
height: auto;
}
&:hover, &:focus {
border: 3px solid red;
}
}

关于javascript - 如何将html5输入按钮转换为div标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22433195/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com