我有一个表单,其中有一个文件上传文件,我对其进行了自定义以适合 PHP
表单正在使用的颜色主题,但它只是静态的。我想向我按照 W3Schools 教程存档的按钮添加一个小的过渡。
但在那之后我遇到了一个我真的不知道如何解决的问题。我对此事进行了搜索,但大多数答案都建议使用 bootstrap
,我也尝试过它,但它搞砸了我当前的元素 CSS
。
谁能告诉我我在动画部分做错了什么。
.fileUpload {
float: left;
position: relative;
overflow: hidden;
background-color: #4068E0;
color: white;
height: 30px;
width: 120px;
text-align: center;
border: 2px solid #4068E0;
border-radius: 20px;
box-shadow: 2px 2px 1px 1px rgba(0, 0, 0, 0.4);
-webkit-transition: prop 0.4s;
-moz-transition: prop 0.4s;
-ms-transition: prop 0.4s;
-o-transition: prop 0.4s;
transition: prop 0.4s;
}
.fileUpload:after {
content: "";
background: #85b7e8;
display: block;
position: absolute;
opacity: 0;
transition: all 0.8s;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
font-size: 20px;
cursor: pointer;
filter: alpha(opacity=0);
height: 100%;
text-align: center;
}
.fileUpload:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
height: 100%;
text-align: center;
}
.fileName {
margin: 2px 0 0 130px;
width: auto;
}
.updLabel {
line-height: 30px;
font-weight: bold;
}
#uploadFile {
border: none;
width: 150px;
height: 30px;
}
<div class="usrCreate-form-right">
<div class="fileUpload">
<span class="updLabel">Add Image</span>
<input type="file" id="uploadFile" class="upload">
</div>
<div class="fileName">
<input id="uploadFile" placeholder="0 files selected" disabled>
</div>
</div>
正如您在上面的片段中看到的那样,动画确实发生了,但它没有弹出文件选择窗口。如果我禁用动画部分,它确实会弹出,我尝试了其他一些也没有用的东西,这就是我决定在这里问的原因。
最佳答案
当我在输入上添加 z-index 时,我成功地使用了你的代码。我尝试使用 z-index: 1
并且成功了。按钮上的视觉效果不会改变。
.fileUpload > input {
z-index: 1;
}
关于html - 使用 CSS 动画文件上传按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46905333/