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部分(「画像選択ボタン」を含む部分)をクリックすることで、実はファイル選択ダイアログが表示できるのです。

この考え方は、以下のサイトが参考になりました。

input type='file'のデザインを変更する

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(作ったボタン)を目立たせているということです。

ちなみにスマホ版での表示です。

参考にしてみてください。

終わりに

以上となります。

意外とハマった場面でした。

スマホ画面にもこだわりたいという方は、お試しください。

ありがとうございました。