• Twitterでシェア
  • Facebookでシェア

label で input[type="file"] を装飾するな

テクノロジー カテゴリーの変更を依頼 記事元:zenn.dev/dqn
適切な情報に変更
113users がブックマーク コメント 16
    共有

    • 記事へのコメント16件

    • 注目コメント
    • 新着コメント
    その他
    sgo2
    注意深く見ればタグで分かるのだけど、何に関する話だと前置きしないのは、アクセシビリティの観点で良くない。

    その他
    kvx
    ドロップのみだとそれこそアクセシビリティ的にNGになる。クリック、タップ、キーボードで操作できないとね。

    その他
    umai_bow
    JS書きたくない…これinputを透明にするのじゃダメなんだっけ

    その他
    Rishatang
    「:focus + label」でも確かにできるけど、for属性指定しないといけないのめんどいので:focus-within使うのが一番ラクだと思う

    その他
    ejointjp
    2022年にもなってinput要素の装飾が未だに不便すぎるのってどういうことなんだろう。

    その他
    cartman0
    inputそのものを装飾できないのはなんでなんだっけ？そっちのほうが手っ取り早いのに

    その他
    vamview
    昔やった時はこの方法だと上手くいかなかった記憶があってセキュリティ的にもまぁそうだろうなと思ってたけど、最近のブラウザは許してくれるようになったのかな

    その他
    spark7
    そんなことせんでもinput[type="file"]をopacityやサイズ/positionやらで隠して、ラベルは囲まずforで指定するタイプで次の要素に置いて、セレクタでinput[type="file"]:focus + label とかして装飾すればcssだけで達成できるやろ。

    その他
    sugarte
    type="file"を装飾するときはクリッカブルにするためにbutoon要素を使うといい

    その他
    ejointjp
    ejointjp 2022年にもなってinput要素の装飾が未だに不便すぎるのってどういうことなんだろう。

    2022/03/01 リンク

    その他
    Rishatang
    Rishatang 「:focus + label」でも確かにできるけど、for属性指定しないといけないのめんどいので:focus-within使うのが一番ラクだと思う

    2022/03/01 リンク

    その他
    cartman0
    cartman0 inputそのものを装飾できないのはなんでなんだっけ？そっちのほうが手っ取り早いのに

    2022/03/01 リンク

    その他
    spark7
    spark7 そんなことせんでもinput[type="file"]をopacityやサイズ/positionやらで隠して、ラベルは囲まずforで指定するタイプで次の要素に置いて、セレクタでinput[type="file"]:focus + label とかして装飾すればcssだけで達成できるやろ。

    2022/03/01 リンク

    その他
    otchy210
    「CSS だけで実装できる」がこの問題とされる実装のモチベーションだと思うので、a11y と同時にそっちもクリアできる実装じゃないと普及しないかも？

    その他
    kvx
    kvx ドロップのみだとそれこそアクセシビリティ的にNGになる。クリック、タップ、キーボードで操作できないとね。

    2022/03/01 リンク

    その他
    mayumayu_nimolove
    dqnの記事

    その他
    umai_bow
    umai_bow JS書きたくない…これinputを透明にするのじゃダメなんだっけ

    2022/03/01 リンク

    その他
    xll
    “button 要素を使い、クリック時に input 要素の click イベントを発火させましょう。”

    その他
    Shinwiki
    ドロップしか受けたくないんだけど

    その他
    vamview
    vamview 昔やった時はこの方法だと上手くいかなかった記憶があってセキュリティ的にもまぁそうだろうなと思ってたけど、最近のブラウザは許してくれるようになったのかな

    2022/03/01 リンク

    その他
    razokulover
    たしかに

    その他
    t_motooka
    これはごもっとも。

    その他
    sgo2
    sgo2 注意深く見ればタグで分かるのだけど、何に関する話だと前置きしないのは、アクセシビリティの観点で良くない。

    2022/03/01 リンク

    その他
    newnakashima
    JSを書かずに済ますためにlabel使ってるのかと思ってた

    その他

    注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

    アプリのスクリーンショット
    いまの話題をアプリでチェック！
    • バナー広告なし
    • ミュート機能あり
    • ダークモード搭載
    アプリをダウンロード

    関連記事

    label で input[type="file"] を装飾するな

    input[type="file"] な要素を装飾する方法を検索したときに、次のような間違った label 要素の使い方を...

    ブックマークしたユーザー

    すべてのユーザーの
    詳細を表示します

    同じサイトの新着

    同じサイトの新着をもっと読む

    いま人気の記事

    いま人気の記事をもっと読む

    いま人気の記事 - テクノロジー

    いま人気の記事 - テクノロジーをもっと読む

    新着記事 - テクノロジー

    新着記事 - テクノロジーをもっと読む

    同時期にブックマークされた記事

    いま人気の記事 - 企業メディア

    企業メディアをもっと読む

    はてなブックマーク

    公式Twitter

    はてなのサービス

    • App Storeからダウンロード
    • Google Playで手に入れよう
    Copyright © 2005-2025 Hatena. All Rights Reserved.