ホームページ >ウェブフロントエンド >htmlチュートリアル >入力ファイルの制御と美化について

入力ファイルの制御と美化について

高洛峰オリジナル: 2017-02-17 16:15:141792ブラウズ

一部のWebサイトにアップロードする場合、「参照」ボタンをクリックした後に[ファイルの選択]ダイアログボックスが表示されます。この機能を実現したい場合は、入力ファイルコントロールを使用して実現してください~

<!doctype html>    
<html lang="en">    
<head>    
  <meta charset="UTF-8">    
  <title>Document</title>    
  <style></style>    
</head>    
<body>    
　　<input type="file" value="选择文件" />    
</body>    
</html>

レンダリングは江おばさんからのものです:

注意!これがテキストとボタンで構成されているとは思わないでください。実際、これはファイルコントロールです

关于input的file 控件及美化

今日仕事で要件に遭遇しました。1 時間いじくり回した後、「ファイルが選択されていません」を表示しないでください。設定できることが分かりました。幅の値は完了です:

コード:

幅の値は、以下に示すように、ちょうど 70px に設定されています。

关于input的file 控件及美化

【美化】

アイデア:

p の外側の層は、スタイルを記述するときに相対的に位置する必要があるため、実際のファイルコントロールがシミュレートされたファイルコントロールをカバーするように、内部の入力に位置参照を提供します。 1 つで、ファイルコントロールを非表示にします (ファイルコントロールが表示されない場合でも)

<!doctype html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>Document</title>  
  <style>  
    .file-box{ position:relative;width:340px}    
    .txt{ height:22px; border:1px solid #cdcdcd; width:180px;}    
    .btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}    
    .file{ position:absolute; top:0; right:80px; height:24px; opacity:0;width:260px; }    
  </style>  
</head>  
<body>  
    <br><br>  
    <p class="file-box">    
        <form action="" method="post" enctype="multipart/form-data">    
        <input type=&#39;text&#39; name=&#39;textfield&#39; id=&#39;textfield&#39; class=&#39;txt&#39; />    
        <input type=&#39;button&#39; class=&#39;btn&#39; value=&#39;浏览&#39; />    
        <input type="file" name="fileField" class="file" id="fileField" size="28"/>    
    </form>    
    </p>    
</body>  
</html>

効果:

关于input的file 控件及美化

ファイルコントロールと入力の美化に関する上記の記事は、エディターによって共有されるすべてのコンテンツです。皆様の参考になれば幸いです。また、皆様も PHP 中国語 Web サイトを応援していただければ幸いです。

入力ファイルの制御と美化に関するその他の記事については、PHP 中国語 Web サイトに注目してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTMLのtableタグの基礎学習チュートリアル次の記事：HTMLのtableタグの基礎学習チュートリアル

続きを見る

入力ファイルの制御と美化について

関連記事