html - 为什么光标在按钮上没有改变
问题描述
我不确定为什么光标不会变为按钮上的指针。我看到一些解决方案说这是因为z-index
. 但是当我尝试使用 时z-index
,它仍然不起作用。
.upload-btn-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
}
.btn {
border: 2px solid gray;
color: gray;
background-color: white;
padding: 8px 20px;
border-radius: 8px;
font-size: 20px;
font-weight: bold;
}
.upload-btn-wrapper input[type=file] {
font-size: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
cursor: pointer;
}
<div class="upload-btn-wrapper">
<button class="btn">Upload a file</button>
<input type="file" name="myfile" />
</div>
谢谢你的帮助。
我从这个codepen作弊:
解决方案
尝试将cursor: pointer;
属性添加到文件的输入类型。这是文件输入类型的最终片段。
.upload-btn-wrapper input[type=file] {
font-size: 100px;
position: absolute;
left: 0;
top: 0;
opacity: 0;
cursor: pointer; /*this is what you need*/
}
让我知道这是否有效。
推荐阅读
- kotlin - 编写 Kotlin/JVM 和 Kotlin/JS 的区别?
- python - 在嵌套字典中追加和读取列表值
- python - 连接中断:ConnectionResetError(104, 'Connection reset by peer') 作为来自 python 服务器的响应,同时通过 Ajax 调用请求
- azure-devops - 基于多个文件更改触发 Azure 管道
- postgresql - 使用 psql 执行 .sql 文件并制作日志文件
- stb-image - stbir_resize_uint8 在内存访问时崩溃
- spring-boot - 从 Kafka 到 JMS 的骆驼路线不起作用(JMS->Kafka->JMS)
- javascript - 尝试在Nodejs上使用猫鼬将嵌套文档保存在MongoDB中
- azure - 为什么 Azure 门户突然需要 OpenID Connect Scopes 来处理已注册应用的声明?
- c# - 将逗号分隔的文本复制到不同的文本框中