この場合はどこにwidth指定すべきでしょうか？

Question

CSS初心者です。
的はずれな質問してたらすみません。

前提・実現したいこと

このような画像アップロード画面を作ってます。
inputでアップロードした画像ファイルを<li>に追加していきます。

添付画像のようにinput部分の横幅がせまくて窮屈なので広げようと思うのですが、横幅（width）の指定をどの要素に対して行うべきか分からずにいます。

該当のソースコード

<label class="upload-img" >配下が添付画像のinput部分になります。

<div style="width: 500px">
    <ul class="horizontal-img-list" >
        <!-- <li class="horizontal-img-list__item"><imgsrc="xxx.jpg"></li> -->
        <li>
            <label class="upload-img" >
              <div class="upload-img__inner" >       
            		  <input class="upload-img__inner__input" accept="image/png,image/jpeg" multiple="multiple" type="file" style="display: none;">
            		  <svg width="24" height="24" fill="#222222" fill-rule="evenodd" viewBox="0 0 24 24" aria-hidden="true" >
            			  <path d="M19.3,5H16.73l-.8-1.61A.7.7,0,0,0,15.3,3H8.7a.7.7,0,0,0-.63.39L7.27,5H4.7A2.7,2.7,0,0,0,2,7.7V18.3A2.7,2.7,0,0,0,4.7,21H19.3A2.7,2.7,0,0,0,22,18.3V7.7A2.7,2.7,0,0,0,19.3,5ZM12,17.3A4.3,4.3,0,1,1,16.3,13,4.31,4.31,0,0,1,12,17.3Z"></path>
            		  </svg>
            		  <p class="fs12">ドラッグアンドドロップ<br>またはクリックしてファイルをアップロード</p>
          	</div>
          </label>
        </li>
    </ul>
    
          
</div>

.upload-img__inner {
    place-content: center;
    -webkit-box-align: center;
    -webkit-box-pack: center; 
    background-color: rgb(245, 245, 245);
    border: 1px dashed rgb(204, 204, 204);
    cursor: pointer;
    height: 150px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    text-align: center;
}

.image-trim {
  position: relative;
  overflow: hidden;
  padding-top: 100%; /* 比率 */
}
.image-trim img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height:  100%;
  object-fit: cover;
}

試したこと

一番上のレベル、全体を囲って500pxとしましたが、
要素内のinputは広がりませんでした。

<div style="width: 500px">

次にinupt自体に着目し、inputの最上位であるlabelに設定しました。
しかし効きませんでした。

<label class="upload-img" style="width: 500px">

その直下で指定すると効きました。

<div class="upload-img__inner" style="width: 500px"> 

ですが、サイズ指定は上位の要素(囲ってるdiv要素など)に対して行うのが基本かと思うのですがどうなんでしょうか？
先輩方アドバイスいただけないでしょうか？
宜しくお願い致します。

Answer 1

こんにちは。

要素内のinputは広がりませんでした

とのことですが、この「要素内のinput」とは、灰色の背景部分のことだと推測して回答します。

まず、width は、大雑把に言うとブロックレベルボックスまたは置換要素にしか適用されません。
ですので、display: inlineとなっているlabelや、その祖先要素に適用しても影響が出ません。その内側の要素に指定するか、またはlabelにdisplay: blockなどを指定するのがいいでしょう。

---

サイズ指定は上位の要素(囲ってるdiv要素など)に対して行うのが基本かと思うのですがどうなんでしょうか？

状況による、としか言えませんが、ご提示のコードであれば「要素内のinput」（＝灰色の背景部分）の幅を広げたいのですから、素直に「要素内のinput」の幅を指定すればいいのではないかな、と思います。

---

蛇足ですが、クリックして.upload-img__inner__inputが反応する要素は label なのですから、label に背景やcursor: pointerをつける方が筋がいいのではないかな、と思います。

Comments

[pecchan]

こんにちは。
>「要素内のinput」とは、灰色の背景部分
そうです、察していただき有難う御座います。

「置換要素」にしか適用されないのですね、これは少し深堀りして学んでおきます。

>素直に「要素内のinput」の幅を指定すればいいのではないかな、と思います。
そういたします。

蛇足なんてとんでもないです。cursor: pointerについてもそのように修正します。

１つの質問に３個も４個もアドバイスいただけました。
本当に本当に有難う御座います！！！