質問編集履歴

1

コードの追記

2020/01/04 07:15

投稿

hurousyotoku500
hurousyotoku500

スコア27

test CHANGED
File without changes
test CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
 
22
22
 
23
-
23
+ ・JS
24
24
 
25
25
  ```
26
26
 
@@ -48,4 +48,106 @@
48
48
 
49
49
 
50
50
 
51
+ ・HTML
52
+
53
+ ```
54
+
55
+ <section class="file-upload-wrap">
56
+
57
+ <img src="img/clip.svg" class="clip">
58
+
59
+ <div id="input-group-1">
60
+
61
+ <span class="file-label">ファイル1:</span><input type="file" id="01" name="01"><label class="file-button" for="01" id="input-label-1">ファイルを選択</label>
62
+
63
+ </div>
64
+
65
+ <div id="input-group-2">
66
+
67
+ <span class="file-label">ファイル2:</span><input type="file" id="02" name="02"><label class="file-button" for="02" id="input-label-2">ファイルを選択</label>
68
+
69
+ </div>
70
+
71
+ <div id="input-group-3">
72
+
73
+ <span class="file-label">ファイル3:</span><input type="file" id="03" name="03"><label class="file-button" for="03" id="input-label-3">ファイルを選択</label>
74
+
75
+ </div>
76
+
77
+ <div id="input-group-4">
78
+
79
+ <span class="file-label">ファイル4:</span><input type="file" id="04" name="04"><label class="file-button" for="04" id="input-label-4">ファイルを選択</label>
80
+
81
+ </div>
82
+
83
+ <div id="input-group-5">
84
+
85
+ <span class="file-label">ファイル5:</span><input type="file" id="05" name="05"><label class="file-button" for="05" id="input-label-5">ファイルを選択</label>
86
+
87
+ </div>
88
+
89
+ </section>
90
+
91
+ ```
92
+
93
+
94
+
95
+ ・CSS
96
+
97
+ ```
98
+
99
+ input[type="file"] {
100
+
101
+ display: none;
102
+
103
+ }
104
+
105
+ .file-button{
106
+
107
+ padding-left: 1px;
108
+
109
+ border-radius: 10px;
110
+
111
+ display: inline-block;
112
+
113
+ position: relative;
114
+
115
+ border: 1px solid #787878;
116
+
117
+ font-size: 10px;
118
+
119
+ width: 74px;
120
+
121
+ height: 11px;
122
+
123
+ padding-bottom: 2px;
124
+
125
+ }
126
+
127
+ .file-button::after{
128
+
129
+ content: "選択されていません";
130
+
131
+ font-size: 10px;
132
+
133
+ height: 20px;
134
+
135
+ line-height: 20px;
136
+
137
+ position: absolute;
138
+
139
+ right: -100px;
140
+
141
+ top: calc(50% - 10px);
142
+
143
+ }
144
+
145
+ .file-button.changed::after {
146
+
147
+ content: "";
148
+
149
+ }
150
+
151
+ ```
152
+
51
153
  よろしくお願いします。