デフォルトのfileタイプのinputタグだとシンプルで、スマホだと少し使いづらかったりします。
かつ、inputタグにCSSをあてても微妙な動作をします。
HTML側を少し工夫するだけでCSSでカスタマイズが可能になります。
CSS側
|
1 2 3 4 5 6 |
label.inputfile { color: white; background-color: blue; padding: 2px; border-radius: 12px; } |
HTML側
|
1 2 3 4 |
<label for="picture" class="inputfile"> Input Image <input type="file" id="picture" style="display:none;"> </label> |