關於input的file 控制項及美化-html教學-PHP中文網

首頁

web前端

html教學

關於input的file 控制項及美化

高洛峰

Feb 17, 2017 pm 04:15 PM

file input 美化

在某些網站上傳時，當點選了「瀏覽」按鈕之後會跳出【選取檔案】的對話方塊。想要實現這項功能，用input的file控制來實現就好啦~

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

登入後複製

效果圖是醬嬸的：

注意！別以為這個是由一個text和一個button組合成的，其實它就是一個file控件哦

关于input的file 控件及美化

今天工作中遇到要求：不顯示“未選擇任何文件”，搗鼓夠一個小時，發現設置它的width值就搞定了：

代碼：

width值設定為70px剛好，如下圖：

关于input的file 控件及美化

【：

外面的一層p是為了給裡面的input提供位置參考，因為寫樣式的時候需要相對定位，使真正的file控制項覆蓋在模擬的上面，然後隱藏掉file控制項（即使file控制項不可見）

<!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 控件及美化以上這篇關於input的file 控制及美化就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望多多支PHP中文網。

更多關於input的file 控制項及美化相關文章請關注PHP中文網！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1653

CakePHP 教程

1413

Laravel 教程

1304

PHP教程

1251

C# 教程

1224

Related knowledge

php blob怎麼轉file Mar 16, 2023 am 10:47 AM

php blob轉file的方法：1.建立一個php範例檔；2、透過「function blobToFile(blob) {return new File([blob], 'screenshot.png', { type: 'image/jpeg' })} 」方法實作Blob轉File即可。

使用java的File.length()函數取得檔案的大小 Jul 24, 2023 am 08:36 AM

使用Java的File.length()函數取得檔案的大小檔案大小是在處理檔案作業時很常見的一個需求，Java提供了一個很方便的方法來取得檔案的大小，即使用File類別的length()方法。本文將介紹如何使用此方法來取得檔案的大小，並給出對應的程式碼範例。首先，我們需要建立一個File物件來表示我們想要取得大小的檔案。以下是建立File物件的方法：Filef

鴻蒙原生應用隨機詩詞 Feb 19, 2024 pm 01:36 PM

想了解更多關於開源的內容，請造訪：51CTO鴻蒙開發者社群https://ost.51cto.com運行環境DAYU200:4.0.10.16SDK：4.0.10.15IDE：4.0.600一、建立應用程式點擊File- >newFile->CreateProgect。選擇模版：【OpenHarmony】EmptyAbility：填寫項目名，shici，應用包名com.nut.shici,應用儲存位置XXX（不要有中文，特殊字符，空格）。 CompileSDK10，Model：Stage。 Device

使用java的File.renameTo()函數重命名文件 Jul 25, 2023 pm 03:45 PM

使用Java的File.renameTo()函數重命名檔案在Java程式設計中，我們經常需要對檔案進行重命名的操作。 Java提供了File類別來處理檔案操作，其中的renameTo()函數可以方便地重新命名檔案。本文將介紹如何使用Java的File.renameTo()函數來重新命名文件，並提供對應的程式碼範例。 File.renameTo()函數是File類別的一個方法，

使用java的File.getParent()函數取得檔案的父路徑 Jul 24, 2023 pm 01:40 PM

使用java的File.getParent()函數取得檔案的父路徑在Java程式設計中，我們經常需要操作檔案和資料夾。有時候，我們需要取得一個檔案的父路徑，也就是該檔案所在資料夾的路徑。 Java的File類別提供了getParent()方法用來取得檔案或資料夾的父路徑。 File類別是Java對檔案和資料夾的抽象表示，它提供了一系列操作檔案和資料夾的方法。其中，get

vue3怎麼封裝input元件和統一表單數據 May 12, 2023 pm 03:58 PM

準備工作用vuecreateexample建立項目，參數大概如下：用原生input原生的input，主要是value和change，資料在change的時候需要同步。 App.tsx如下：import{ref}from'vue';exportdefault{setup(){//username就是資料constusername=ref('張三');//輸入框變化的時候，同步資料constonInput=;return( )=>({

laravel input隱藏域怎麼實現 Dec 12, 2022 am 10:07 AM

laravel input隱藏域的實作方法：1、找到並開啟Blade模板檔案；2、在Blade模板中使用method_field方法來建立隱藏域，其建立語法為「{{ method_field('DELETE') }}」。

利用ThinkPHP6實現漂亮的404頁面 Jun 20, 2023 am 11:06 AM

隨著網路的日益發展，許多網站或應用程式也逐漸變得複雜。當使用者在使用時，時常會遇到錯誤頁面，其中最常見的就是404頁面。 404頁面指造訪的頁面不存在，是常見的錯誤頁面。而對於網站或應用程式來說，一個漂亮的404頁面能大幅提升使用者體驗。在本文中，我們將會介紹如何利用ThinkPHP6快速實現一個漂亮的404頁面。創建路由首先，我們需要在route資料夾中建立一個err

See all articles

關於input的file 控制項及美化

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題