この2日間、Baixing.comの筆記試験問題を解いているときに、このような問題に遭遇しました。HTML5の新機能を使用して、Baixing.comの既存のモジュールを実装しました。しばらくBaixing.comを閲覧した後、最終的に情報を公開するためのフォームモジュールを選択しました。理由は非常に簡単です。HTML5にはフォームの新機能がたくさんあります。これらの新機能も非常に実用的です。結局のところ、登録、ログイン、投稿など、フォームのある場所が多すぎます...(ちょっと話がそれましたね。) この時点で、元のウェブページのフォームにこの要素が表示されました 私の最初の反応は、はは、それは単なる入力要素で、CSS でスタイルをカスタマイズできる、ということでした。その後、当然のことながら、Baixing.com の特定のスタイルを確認するために「右クリック」-「要素を検査」する準備をしましたが、後でわかりました... 間違って開いたに違いありません... この場合、もちろん自分でやらなければなりません。 1 つ確認できることは、ファイルをアップロードするためのこのフォーム コントロールでは input[type="file"] を使用する必要があるということです。 OK、次のコード行を追加するだけです: コードをコピー コードは次のとおりです。<入力タイプ="ファイル" /> Chrome ブラウザで更新します。 これがデフォルトのスタイルであることは間違いありませんが、このデフォルトのスタイルを変更するのは難しいことがわかりました。最も厄介なのは、ブラウザによってデフォルトのスタイルが異なることです。インターネット上の画像からそれが非常に明らかです。 (だから私は言う、あなたたちブラウザはまったく従順ではなく、お互いにうまくコミュニケーションをとっていない。あなたたちはとても高いところにいるが、フロントエンドの学生は苦しんでいる。) ただし、解決策はまだ簡単に考えられます。要素を使用して入力をラップし、その要素に他の必要な要素を追加し、スタイルを設定して目的の効果を実現します。入力要素の位置の値を absolute に設定して外側の要素を塗りつぶし、入力を透明にします。 HTML コードは次のとおりです。 コードをコピー コードは次のとおりです。<div id="入力ファイル"> <span id="text">クリックしてアップロード</span> <input id="ファイル" type="ファイル" /> </div> 対応する CSS コードは次のとおりです。 コードをコピー コードは次のとおりです。#入力ファイル{ position: relative; /* 子要素の位置を確認する*/ 幅: 120ピクセル; 高さ: 30px; 背景: #eee; 境界線: 1px 実線 #ccc; テキスト配置: 中央; カーソル: ポインタ; } #文章 { 表示: インラインブロック; 上マージン: 5px; 色: #666; フォントファミリー: "黑体"; フォントサイズ: 18px; } #ファイル { 表示: ブロック; 位置: 絶対; 上: 0; 左: 0; width: 120px; /* 幅と高さは周囲の要素と一致する必要があります*/ 高さ: 30px; 不透明度: 0; -moz-opacity: 0; /* 古いブラウザと互換性あり */ フィルター: alpha(opacity=0); /* IE互換 */ } 表示効果は以下のようになります。 しかし、ここでもまだバグがあります。このようにボタンを作成すると、マウスをボタンの上に置くとクリックできるはずです。しかし、すべての要素に cursor:pointer; 属性を追加しても、一部の領域はポインターとして表示されます。この問題を解決できる専門家はいますか? |
<<: Vue3 における親コンポーネントと子コンポーネント間の値の転送の詳細な説明
目次Linux ドライバーの共通機能 (copy_from_user open read write...
ins と del は、HTML 4.0 で導入され、文書の作成時に作成者が共同作業できるようにし、...
SSH ターミナル (putty、xshell など) を使用して Linux サーバーに接続し、時...
需要背景統計インターフェースでは、フロントエンドは 2 つの配列を返す必要があります。1 つは 0 ...
目次1. イベントとは何ですか? 2. イベントの使い方3. バインドタップとキャッチタップの違い4...
この記事は主にDockerでパラメータ変数を外部から指定する方法を紹介します。この記事のサンプルコー...
目次解決策1: レプリカを再構築する前提条件アドバンテージ欠点手順マスター奴隷解決策2: データ修復...
この記事では、例を使用して、MySQL で複数テーブルの関連統計を実装する方法について説明します。ご...
Vueはパンくずコンポーネントをカプセル化して参照します。具体的な内容は次のとおりです。効果を達成す...
公式ドキュメント http://dev.mysql.com/doc/refman/5.7/en/se...
目次1. エラーメッセージ2. エラーの原因3. 解決策1. エラーメッセージ1. インストール後、...
プロジェクトはサーバーと対話し、post を通じてサーバー側の jsp にアクセスし、jsp はサー...
2級コンピュータ試験のMySQL知識ポイントの基礎、一般的なMYSQLコマンドは次のとおりです。よく...
目次1. クラス1.1 コンストラクタ() 1.2 ゲッターとセッター1.3 これ1.4 静的プロパ...
フォーム内の visibility=hidden および display=none のフォーム要素は...