为什么将我的 div 类更改为表单会改变我网站的功能
我正在为我的网站上传文件，当我尝试将 id 为“cool-border”的 div 更改为表单元素以便能够上传文件时，我的代码不再有效。当我选择一个文件时，文件名不再显示在文件文本范围中。我删除了一些用于拖放过程的代码以整理混乱，但是是的，我很困惑
抱歉，缩放比例不稳定，哈哈，我还没有让它响应
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
background-color: black;
}
#dropContainer {
border-radius: 1em;
color: #effffb;
background-color: #6cd89d;
font-size: large;
font-weight: bold;
margin: 20px;
padding: 1em;
text-align: center;
line-height: 2em;
max-width: 50vh;
}
#fakeButton {
background-color: #a5a5a5;
border: none;
border-radius: 5px;
padding: 5px;
cursor: pointer;
color: #effffb;
}
#fakeButton:hover{
background-color: #5c5c5c;
}
span {
font-size: small;
font-weight: normal;
}
#cool-border {
background-image: linear-gradient(90deg, #effffb 50%, transparent 50%), linear-gradient(90deg, #effffb 50%, transparent 50%), linear-gradient(0deg, #effffb 50%, transparent 50%), linear-gradient(0deg, #effffb 50%, transparent 50%);
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px;
background-position: left top, right bottom, left bottom, right top;
animation: border-dance 1s infinite linear;
border-radius: 5px;
padding: 1em;
}
@keyframes border-dance {
0% {
background-position: left top, right bottom, left bottom, right top;
}
100% {
background-position: left 15px top, right 15px bottom , left bottom 15px , right top 15px;
}
}
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Upload</title>
</head>
<body>
慕勒34288721回答
-
杨__羊羊
您的按钮需要具有 type="button" 属性，如下所示：<button type="button" id="fakeButton">Select a file</button>否则，它充当提交按钮，如果没有指定操作，它基本上会刷新浏览器。type： 按钮的默认行为。可能的值有： 该按钮将表单数据提交到服务器。如果未为与表单关联的按钮指定该属性，或者该属性为空值或无效值，则这是默认值。
随时随地看视频慕课网APP
相关分类
Html5