ファイルコントロールを美しくする理由は何ですか?他の子供たちはみんなきちんとしたきれいな服を着ているのに、そのうちの2人があなたを無視していると想像してみてください。とても不調和です。 元のファイル コントロールは次のようになります。 これはテキストとボタンで構成されているとは思わないでください。これはコントロールです。HTML コードは次のとおりです。 コードをコピー コードは次のとおりです。<input type="ファイル" name="ファイル" /> この場合、テキストとボタンを使用してこのファイルのスタイルを表示します。HTML コードは次のとおりです。 コードをコピー コードは次のとおりです。<div class="ファイルボックス"> <フォームアクション="" メソッド="post" enctype="multipart/form-data"> <入力タイプ='テキスト' 名前='テキストフィールド' id='テキストフィールド' クラス='txt' /> <input type='button' class='btn' value='参照...' /> <input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" /> <input type="submit" name="submit" class="btn" value="アップロード" /> </フォーム> </div> 外側の div は、内部の入力の位置参照を提供するためのものです。スタイルを記述するときには相対的な配置が必要なため、実際のファイル コントロールがシミュレートされたファイル コントロールを覆い、ファイル コントロールを非表示にします (ファイル コントロールが非表示の場合でも)。そのため、CSS コードは次のようになります。 コードをコピー コードは次のとおりです。.file-box{ 位置:相対;幅:340px} .txt{ 高さ:22px; 境界線:1px 実線 #cdcdcd; 幅:180px;} .btn{ 背景色:#FFF; 境界線:1px 実線 #CDCDCD; 高さ:24px; 幅:70px;} .file{ 位置:絶対; 上:0; 右:80px; 高さ:24px; フィルター:アルファ(不透明度:0);不透明度: 0;幅:260px } 効果画像: ヒント: 実行前にコードの一部を変更することができます |
<<: CSSを使用して画像フレームアニメーションと曲線の動きを実装する
>>: Vueは画像のドラッグアンドドロップ機能を実装します
問題の説明プロジェクトのログインページでは、7日間パスワードを記憶する必要がある機能があります。この...
このブログを書くつもりはなかったのですが、実際の操作中に、ネットワークの問題に圧倒されたこと (ネッ...
CSS3 では画像の色を変更できます。これからは複数の絵をデザインする必要がなくなり、いつでも修正で...
明らかな HTML、隠された「公開スクリプト」 Web ページのダウンロード時間を短縮する鍵は、フ...
効果画像(境界線の色が薄すぎるので、{} で囲みます): { }参考リンク Pure CSS バブル...
DataframeはSpark 1.3.0で導入された新しいAPIで、Sparkで大規模な構造化デー...
目次1. 冷蔵庫に入りきらない象2. シャドウクローン文字列3. 実際に見た「奇妙なボール」 4. ...
目次序文:ステップ1: 無料の天気予報インターフェースを見つけるステップ2: 天気予報インターフェー...
目次プラン依存関係をインストールする依存関係の導入pxをremに変換するFlexible.jsを変更...
この記事の例では、Webメッセージボードを実装するためのjsの具体的なコードを参考までに共有していま...
この記事では、例を使用して、MySQL レプリケーションの原理と実際のアプリケーションについて説明し...
目次問題1: 破壊1. 破壊する方法2. いつ破壊するか2.1 解決策1: route.queryを...
ウェブデザイナーを長い間悩ませてきた疑問があります。それは、固定レイアウト、流動的レイアウト、柔軟レ...
リンク A のセマンティクス、ライティング スタイル、およびベスト プラクティス。私は JavaEy...
目次安定スロットリング要約する安定自動ドアは人を感知してドアを開け、5 秒間のカウントダウンを開始し...