この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 では、シンボリック リンクを作成または削除する必要がある場合があります。もしそうなら、何...
序文日常の開発では、テキストの水平スクロール効果(一般にカルーセルと呼ばれる)によく遭遇します。これ...
目次序文1. Dockerをインストールする2. Dapr CLIをインストールする3. Net6 ...
目次質問:プロジェクトには 2 つのトークンがあり、1 つは有効期間が 2 時間 (ショート トーク...
MySQLをアンインストールする1. コントロールパネルで、MySQLのすべてのコンポーネントをア...
序文CSS がフロントエンド開発の基本的なスキルであるならば、「セレクター」は基礎中の基礎です。これ...
成果を達成する実装コードhtml <input type="radio" ...
序文最近、フロントエンドの学習に関する以前のメモを整理したところ、モバイル Web 画面の適応 (r...
目次1. マップを初期化する2. マップポイント3. 位置決めを有効にする4. マップの変更を監視す...
FlashFXPのダウンロードアドレスは、https://www.jb51.net/softs/95...
序文前回の記事ではNode.jsのインストールと設定を紹介しました。今回はVScodeでbableを...
序文Vue で要素を初回取得できない問題の解決方法は、ポップアップ ウィンドウで要素を取得するために...
jsを使用して、中国語をピンインに変換するパッケージを作成しました。倉庫のアドレスはpinyin-p...
メインライブラリのバイナリログ: # 2420 で #170809 17:16:20 サーバー ID...
この記事の例では、vueシャトルボックスを上下に動かすための具体的なコードを参考までに共有しています...