入力ファイルの制御と美化について-htmlチュートリアル-php.cn

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

高洛峰

リリース： 2017-02-17 16:15:14

オリジナル

1770 人が閲覧しました

一部の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 控件及美化