CakePHP3でファイルアップロードボタン(ファイルを選択)の文字がスマホ版だと大きくならない
ファイルアップロードボタン(ファイルを選択)の文字、ありますよね。
これがなぜかスマホ版だとCSSで指定してfont-sizeを変えても大きくならないことがありました。
ブラウザ依存だからですかね。
そこで強引にではありますが解決したので、その方法を記します。
【自分の環境】
macOS Catalina
PHP7.4.2
CakePHP3.8
MAMP5.7
Apache2.2
MySQL5.7
ファイルアップロードボタン(ファイルを選択)を新たに生成する
結論から言うと「ファイルアップロードボタン(ファイルを選択)を新たに作ってしまう」ということです。
もともと以下のようになっています。
<?= $this->Form->create($photo,['type'=>'file']) ?> <fieldset> <p class="title">〜画像を選択〜</p> <?php echo $this->Form->file('name',['class'=>'file']); ?> </fieldset> <?= $this->Form->button(__('写真を登録する!'),['class'=>'button']) ?> <?= $this->Form->end() ?>
これだと普通のファイルアップロードボタンです。
PC画面だとこれでフォントサイズを変えられていいんですが、スマホ画面だと変わらなかったです。
そこで以下のようにします。
<?= $this->Form->create($photo,['type'=>'file']) ?> <fieldset> <p class="title">〜画像を選択〜</p> <?php echo '<label>'.'<div class="choice">画像選択ボタン</div>'.$this->Form->file('name',['class'=>'file']).'</label>'; // この行を変更 ?> </fieldset> <?= $this->Form->button(__('写真を登録する!'),['class'=>'button']) ?> <?= $this->Form->end() ?>
「この行を変更」とした部分を見てください。
元々は「$this->Form->file('name',['class'=>'file'])」だけでした。
それを
<div class="choice">画像選択ボタン</div>'.$this->Form->file('name',['class'=>'file'])
とした上で、さらに無理やりlabelタグで囲っていますね。
labelタグで囲むことで、label部分(「画像選択ボタン」を含む部分)をクリックすることで、実はファイル選択ダイアログが表示できるのです。
この考え方は、以下のサイトが参考になりました。
CSSを調整する
仕上げにCSSを調整します。
元々の「ファイルを選択」みたいなボタンはdisplay: none;で非表示にします。
あとは「画像選択ボタン」を自由に調整します。
自分は以下のようなCSSにしました。
.main_text .image_add .choice{ width: 500px; height: 100px; font-size: 60px; margin: 100px 0; background-color: #000000; color: #FFFFFF; border-radius: 16px; text-align: center; line-height: 90px; } .main_text .image_add .file{ display: none; }
ちょっと長いですが、まず要点は.file(元々のボタン)をdisplay: none;にして、.choice(作ったボタン)を目立たせているということです。
ちなみにスマホ版での表示です。
参考にしてみてください。