پیشنمایش زنده
کد HTML
<form class="modal">
<span class="close">X</span>
<div class="content">
<span class="title">Upload a File</span>
<p class="message">Select a file to upload from your computer or device.</p>
<div class="actions">
<label for="file" class="button upload-btn">Choose File
<input hidden="" type="file" id="file">
</label>
</div>
<div class="result">
<div class="file-uploaded"><p>profile_pic.png</p></div>
</div>
</div>
</form>
کد CSS
.modal {
background-color: rgb(255, 255, 255);
border-radius: 1em;
box-shadow: 0px 100px 48px -60px rgba(0,0,0,0.1);
color: rgb(15, 14, 14);
max-width: 330px;
overflow: hidden;
position: relative;
transition: background-color 0.3s, color 0.3s;
}
.content > *, .modal > * {
padding: 0.875em;
}
.title {
font-size: 1.25em;
font-weight: 600;
line-height: 1.2;
display: flex;
justify-content: center;
}
.message {
line-height: 1.2;
text-align: center;
}
.actions {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.upload-btn {
background-color: transparent;
border: 0.125rem dashed hsla(223,10%,50%,0.4);
flex: 1;
padding: 0.375rem 2rem;
}
.upload-btn:hover {
background-color: hsla(223,10%,60%,0.2);
}
.close {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(226, 94, 54);
height: 30px;
width: 30px;
border-radius: 50%;
position: absolute;
right: 10px;
top: 10px;
color: #fff;
font-weight: bold;
cursor: pointer;
}
.result {
margin-top: 4px;
background-color: rgba(0, 140, 255, 0.062);
display: flex;
align-items: center;
position: relative;
border-radius: 1em;
}
.file-uploaded {
font-weight: 300;
}
.file-uploaded::before {
position: absolute;
content: "X";
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(26, 7, 1, 0.212);
height: 30px;
width: 30px;
border-radius: 50%;
right: 10px;
top: 10px;
color: rgb(255, 255, 255);
font-weight: bold;
cursor: pointer;
}
.file-uploaded:hover::before {
background-color: rgba(233, 40, 6, 0.664);
}