À propos du contrôle et de l'embellissement des fichiers d'entrée-tutoriel HTML-php.cn

À propos du contrôle et de l'embellissement des fichiers d'entrée

高洛峰

Libérer： 2017-02-17 16:15:14

original

1816 Les gens l'ont consulté

Lors du téléchargement sur certains sites Web, une boîte de dialogue [Sélectionner un fichier] apparaîtra après avoir cliqué sur le bouton « Parcourir ». Si vous souhaitez réaliser cette fonction, utilisez simplement le contrôle du fichier d'entrée pour y parvenir~

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

Copier après la connexion

Le rendu est celui de Tante Jiang :

Attention ! Ne pensez pas que celui-ci est composé d'un texte et d'un bouton. En fait, il s'agit d'un contrôle de fichier

关于input的file 控件及美化

J'ai rencontré une exigence au travail aujourd'hui : ne pas afficher " Aucun fichier sélectionné" ", après avoir bricolé pendant une heure, j'ai constaté que le réglage de sa valeur de largeur est fait :

Code :

Valeur de largeur Réglez-le sur 70 px, comme indiqué ci-dessous :

关于input的file 控件及美化

[Embellissement]

Idée :

L'extérieur la couche de p doit donner l'intérieur L'entrée fournit une référence de position, car un positionnement relatif est requis lors de l'écriture des styles, de sorte que le contrôle de fichier réel couvre la simulation, puis masque le contrôle de fichier (même si le contrôle de fichier est invisible)

<!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>

Copier après la connexion

Effet :

关于input的file 控件及美化

L'article ci-dessus sur le contrôle et l'embellissement des fichiers d'entrée est tout le contenu partagé par l'éditeur I. j'espère qu'il pourra vous donner une référence, et j'espère qu'il sera possible de prendre en charge le site Web PHP chinois.

Pour plus d'articles sur les contrôles et l'embellissement des fichiers d'entrée, veuillez faire attention au site Web PHP chinois !