关于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工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7685

Java教程

1639

CakePHP 教程

1393

Laravel 教程

1287

PHP教程

1229

显示更多

Related knowledge

使用java的File.length()函数获取文件的大小 Jul 24, 2023 am 08:36 AM

使用Java的File.length()函数获取文件的大小文件大小是在处理文件操作时很常见的一个需求，Java提供了一个很方便的方法来获取文件的大小，即使用File类的length()方法。本文将介绍如何使用该方法来获取文件的大小，并给出相应的代码示例。首先，我们需要创建一个File对象来表示我们想要获取大小的文件。以下是创建File对象的方法：Filef

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即可。

鸿蒙原生应用随机诗词 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') }}”。

使用java的File.getParentFile()函数获取文件的父目录 Jul 27, 2023 am 11:45 AM

使用java的File.getParentFile()函数获取文件的父目录在Java编程中，我们经常需要操作文件和文件夹。当我们需要获取文件的父目录时，可以使用Java提供的File.getParentFile()函数来完成。本文将介绍如何使用这个函数并提供代码示例。Java中的File类是用于操作文件和文件夹的主要类。它提供了许多方法来获取和操作文件的属性

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版

热门话题