css input[type=file] スタイルの美化 (入力アップロードファイルスタイル)

css input[type=file] スタイルの美化 (入力アップロードファイルスタイル)

効果:

<!doctypehtml>  
<html>  
<ヘッド>  
<メタ文字セット="utf-8">  
<title>無題のドキュメント</title>  
    <スタイル>  
        /*スタイル 1*/  
        .a-アップロード{  
            パディング: 4px 10px;  
            高さ: 20px;  
            行の高さ: 20px;  
            位置: 相対的;  
            カーソル: ポインタ;  
            色: #888;  
            背景: #fafafa;  
            境界線: 1px 実線 #ddd;  
            境界線の半径: 4px;  
            オーバーフロー: 非表示;  
            表示: インラインブロック;  
            *表示: インライン;  
            *ズーム: 1  
        }  
        .a-アップロード入力{  
            位置: 絶対;  
            フォントサイズ: 100px;  
            右: 0;  
            上: 0;  
            不透明度: 0;  
            フィルター:アルファ(不透明度=0);  
            カーソル: ポインタ  
        }  
        .a-アップロード:hover {  
            色: #444;  
            背景: #eee;  
            境界線の色: #ccc;  
            テキスト装飾: なし  
        }  
        /*スタイル 2*/  
        。ファイル {  
            位置: 相対的;  
            表示: インラインブロック;  
            背景: #D0EEFF;  
            境界線: 1px 実線 #99D3F5;  
            境界線の半径: 4px;  
            パディング: 4px 12px;  
            オーバーフロー: 非表示;  
            色: #1E88C7;  
            テキスト装飾: なし;  
            テキストインデント: 0;  
            行の高さ: 20px;  
        }  
        .file 入力 {  
            位置: 絶対;  
            フォントサイズ: 100px;  
            右: 0;  
            上: 0;  
            不透明度: 0;  
        }  
        .file:hover {  
            背景: #AADFFD;  
            境界線の色: #78C3F3;  
            色: #004974;  
            テキスト装飾: なし;  
        }  
    </スタイル>  
</head>  
<body style="padding: 10px">  
<a href="javascript:;" class="a-upload">  
    <input type="file" name="" id="">ファイルをアップロードするにはここをクリックしてください</a>  
<a href="javascript:;" class="file">ファイルを選択<input type="file" name="" id="">  
</a>  
</本文>  
</html>

要約する

上記はエディターが紹介したCSS input[type=file]スタイルの美化(入力アップロードファイルスタイル)です。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残してください。エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  ウェブページ作成時に標準 HTML コードを使用する際のポイント

>>:  Vueはページdivボックスのドラッグアンドドロップソート機能を実装します

推薦する

数千万件のレコードをMySQLに素早く挿入する方法に関する実践的なチュートリアル

1. データベースを作成する 2. テーブルを作成する1. deptテーブルを作成する テーブル「d...

HTMLフォーム要素の詳しい解説(パート1)

HTML フォームは、さまざまな種類のユーザー入力を収集するために使用されます。 HTML フォー...

a href=# と a href=javascript:void(0) の違いの詳細な説明

a href="#"> リンクをクリックすると、ページがページ上部までスク...

MySQL 完全崩壊: クエリフィルタ条件の詳細な説明

概要実際のビジネス シナリオ アプリケーションでは、ビジネス条件に基づいて対象データを取得およびフィ...

CSSマウスを画像の上に置いたときにマスクレイヤー効果を追加する実装

まず効果を見てみましょう: マウスを画像の上に移動すると、影の効果とテキスト/アイコンが追加されます...

入力スクリプトなしでタイプ拡張を使用する方法

序文JS の型付けが弱く、記述基準が緩く、開発ツールのサポートが弱いため、前任者のコードをメンテナン...

初心者のための入門チュートリアル⑤:ウェブサイト登録はとても簡単、簡単な登録のヒント

スペースを購入してウェブサイトを構築したことがある友人なら、ウェブサイトは正式に開設する前に登録する...

CSS3を使用してオンラインライブ放送に似たキューアニメーションを実装する方法

以前、グループの友人が質問しました。つまり、ミニプログラムでユーザーがオンラインになったときに、ライ...

ブロックレベル要素、インライン要素、可変要素の概要

ブロック要素p - 段落テキストの事前フォーマットテーブルol - ソートフォームul - 順序なし...

nginxとIISで使用できるSSL証明書を作成する

目次SSL証明書の作成1. 秘密鍵を生成する2. 証明書要求ファイルを生成する3. CRT証明書ファ...

ネイティブ JavaScript メッセージボード

この記事では、参考までにメッセージボードを実装するためのJavaScriptの具体的なコードを紹介し...

Idea の起動速度を改善し、Tomcat ログの文字化けを解決する方法

目次序文アイデアの起動速度Tomcat ログが文字化けしている序文Idea を再インストールしたので...

Mysql SQL ステートメントのコメント

MySQL SQL ステートメントにコメントを追加できます。MySQL SQL ステートメントのコメ...

オブジェクト内のフィールドを削除する js メソッド

この記事では主に、オブジェクト内のフィールドを削除するための js の実装を紹介し、次のように共有し...

MySQL バックアップ スクリプトの書き方

序文:データベースのバックアップの重要性は、特にデータの損失が深刻な結果を招く可能性がある実稼働環境...