CSS file_fieldのボタンを非表示にしてクリックして動く要素は残す

下記のようにfile_fieldで画像をアップロードできるようにしたいのですが、
既存で出てくるボタンを隠し、該当エリアをクリックした際にファイル選択できる要素は残したいのですが、
ネットで調べても

visibility: hidden;
display:none

以上のいずれかで叶うとの記事のみです。
試してみたのですが非表示になりますが、要素自体がなくなっているようで該当エリアをクリックしても
ファイル選択の画面が出てきません。

###実現したいイメージ
teratailの画像アップロードのように、任意のボタンの下にファイルアップロードの要素を入れたいのですが、
元の要素があり障害になっております。

####現在の画面

CSSで非表示にした結果

visibility: hidden;　もしくは　display:none
で非表示になってしまいます。
↓

他のミニアプリで同じように行った際は表示だけが消えてクリックできてたのですが、
何故できないのかわからない状態です。
詳しい方いらっしゃいましたらご教授いただきたく存じます。

下記は現在のview(html.haml)とscssになります。
どうぞよろしくお願いいたします。

html.haml
1.label-box__inner
2  = f.label "画像"
3  %br/
4  = f.fields_for :images do |image|
5   = image.file_field :image_path, multipart: :true, class:"input-default"

html.erb
1<div class="label-box__inner">
2  <%= label "画像" %>
3  <%= f.fields_for :images do |image| %>
4    <%= image.file_field :image_path, multipart: :true, class:"input-default" %>
5</div>

scss
1  .label-box__inner{
2    padding: 10px 20px 10px 20px;
3    .input-default{
4      width: 100%;
5      height: 40px;
6      margin: auto;
7      padding: 10px 16px 8px;
8      border-radius:4px;
9      border: 1px solid $light_gray;
10      background: #fff;
11      line-height: 1.5;
12      cursor: pointer;
13      outline-width: 2px;
14    }
15  }

s8_chu

2019/04/15 09:34

現象が再現する HTML, CSS を質問文に追記していただけませんか？

azuapricot

2019/04/15 10:01

言葉だけではわかりにくいので、どうなってほしいのか図で示して下さい。また、現在のあなたのコードを貼ってもらわないと事象の再現ができません。

params_bird

2019/04/15 10:02

失礼いたしました。コードを追加いたしました。

s8_chu

2019/04/15 10:04

コードは素の HTML で書いていただけませんか？

x_x

2019/04/15 10:11

「既存で出てくるボタンを隠し」たのであれば、代わりの何かを表示すべきでは？

params_bird

2019/04/15 10:16

x_xさん代わりのボックスを作りそこに入れる方法も試みたのですが、表示が重なって来てしまい、そのため表示を隠すとやはり機能として失われてしまいました。

行動規範の内容に同意します

回答1件

ベストアンサー

質問者さんの実現したいことは以下のように行えると思います(動作確認用リンク)。

HTML
1<div class="label-box__inner">
2  <label>画像
3    <input type="file" class="input-default">
4    <div class="boxFileSelect"></div>
5  </label>
6</div>

SCSS
1* {
2  margin: 0;
3  padding: 0;
4  box-sizing: border-box;
5}
6
7.label-box__inner {
8  padding: 10px 20px 10px 20px;
9  
10  .input-default {
11    display: none;
12  }
13  
14  .boxFileSelect {
15    width: 100%;
16    height: 40px;
17    margin: auto;
18    padding: 10px 16px 8px;
19    border-radius:4px;
20    border: 1px solid #d3d3d3;
21    background: #fff;
22    line-height: 1.5;
23    cursor: pointer;
24    outline-width: 2px;
25  }
26}