私はファイルアップロードを行ったフォームを持っています。PHP
フォームが使用しているカラーテーマに合わせてカスタマイズしましたが、静的です。私はW3Schoolチュートリアルの後にアーカイブしたボタンに小さなトランジションを追加したいと思っていました。CSSを使用してファイルのアップロードボタンをアニメーション化する
しかし、その後、私は本当に解決方法を知らない問題に直面しています。私はこの問題について検索しましたが、ほとんどの回答は私が試した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>
あなたは上記のスニペットで見ることができるようにアニメーションが起こるんが、それはファイル選択ウィンドウがポップアップしません。私がアニメーション部分を無効にするとポップアップしますが、これもうまくいきませんでしたので、私はここで尋ねることにしました。
以下の答えは、問題を解決する可能性があります異なる要素のために、私は同じIDを持つ2つの入力があることを見なかった – bhansa
ああTHXを同じIDを使用していません。 – Sand