[解決済み] input type="file "ボタンのスタイリング
2022-03-15 01:53:26
質問
入力欄のスタイル
type="file"
ボタンをクリックします。
<input type="file" />
解決方法は?
ファイル入力のスタイリングは、ほとんどのブラウザがCSSやjavascriptから見た目を変えることができないため、非常に困難です。
入力の大きさなどでも反応しない。
<input type="file" style="width:200px">
その代わり、size属性を使用する必要があります。
<input type="file" size="60" />
これより洗練されたスタイル(例えばブラウズボタンの外観を変えるなど)については、ネイティブのファイル入力の上にスタイル付きのボタンと入力ボックスを重ねるという巧妙な方法を見る必要があります。rm がすでに言及した記事で www.quirksmode.org/dom/inputfile.html は、私が見た中で最も良いものです。
アップデイト
をスタイルするのは難しいですが
<input>
タグを直接使用することはできません。
<label>
タグを使用します。以下の@JoshCrozierの回答を参照してください。
https://stackoverflow.com/a/25825731/10128619
関連
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] リスト項目にマウスを置いたときに、カーソルを手の形に変えるには?
-
[解決済み] <button> vs. <input type="button" />. Which to use?
-
[解決済み] インラインCSSでa:hoverを記述するには?
-
[解決済み] HTML5でfloat入力タイプはありますか?
-
[解決済み] HTMLのid属性とname属性の違い
-
[解決済み] HTML Input="file" Accept Attribute File Type (CSV)
-
[解決済み】<input type="file">でファイル形式を制限する?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Uncaught TypeError: document.getElementsById は関数ではありません。
-
iframeフレームワークの使用
-
document.forms 使用方法
-
[解決済み] Bootstrap 3.3.7で改行する方法
-
[解決済み] BootstrapのCollapse Navbarが動作しない
-
[解決済み] input type="file "ボタンのスタイリング
-
[解決済み] <meta charset="utf-8"> vs <meta http-equiv="Content-Type">.
-
[解決済み] HTMLの "role "属性は何のためにあるのですか?
-
[解決済み] ローカルストレージとCookieの比較
-
[解決済み] input type="date "のフォーマットを変更する方法はありますか?