html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../reset.css">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>기본형</h1>
<div class="file_form">
<input type="file" name="" id="">
<span class="text">filename...</span>
</div>
<h1>이미지형</h1>
<div class="file_form_img">
<div class="img">
<img src="" alt="">
</div>
<div class="file">
<input type="file" name="" id="">
</div>
</div>
</body>
</html>css
@charset "utf-8";
body{
padding: 50px;
}
h1{
margin: 50px 0 20px;
font-size: 20px;
font-weight: bold;
}
.file_form{
position: relative;
display: inline-block;
width: 250px;
height: 38px;
line-height: 38px;
border: 1px solid limegreen;
}
.file_form::after{
content: '파일찾기';
position: absolute;
right: 0;
bottom: 0;
width: 70px;
height: 38px;
line-height: 38px;
text-align: center;
background-color: limegreen;
color: #fff;
font-size: 12px;
}
.file_form .text{
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding-right: 75px;
padding-left: 10px;
}
.file_form input{
position: absolute;
width: 100%;
height: 38px;
background-color: pink;
z-index: 10;
opacity: 0;
}
/* */
.file_form_img{
width: 100px;
}
.file_form_img input{
position: absolute;
width: 100%;
height: 24px;
opacity: 0;
}
.file_form_img .img{
position: relative;
width: 100px;
height: 100px;
background: url("default.png") no-repeat 50%;
background-size: 100px;
border-radius: 50%;
}
.file_form_img .img::after{
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid #000;
border-radius: 50%;
}
.file_form_img .file{
position: relative;
width: 82px;
height: 24px;
margin: 20px auto 0;
background: url("btn_file.jpg") no-repeat;
}
* 부스트코스 UI 교육을 듣고 개인적으로 정리한 내용입니다.
728x90
'HMTL & CSS' 카테고리의 다른 글
| 반응형 예제시안 (가로모드 적용버전) (0) | 2020.09.07 |
|---|---|
| 체크박스 예시 소스 코드 (0) | 2020.09.01 |
| 레이어팝업 만들기 [ Layer Popup ] (0) | 2020.09.01 |
| 달력 UI제작 (웹접근성 코드) (0) | 2020.08.28 |
| 썸네일 이미지 목록 - 2 (0) | 2020.08.24 |