【input[type="file"】样式以及一些小问题

原创 2018年04月16日 16:52:46
<div class="fileBox">
	<input type="file">
	<div class="btn">添加文件</div>
</div>

这里主要需要注意的是标签的穿透和input[type="file"]的鼠标移上显示小手指的问题

首先写出html布局

<div class="fileBox">
是为了给input[type="file"]一个外框,<div class="btn">是显示在页面上按钮的样式
.fileBox{        //给外框设置宽高 加上定位
    width: 124px;        
    height: 35px;
    position: relative;
    overflow: hidden;
}
input[type="file"]{
    width: 124px;
    height: 35px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 0;        //注意,font-size用来去掉input[type="file"]标签默认的文字
}
.btn-red {    //给显示在页面上的按钮写样式
    width: 120px;
    height: 31px;
    line-height: 31px;
    text-align: center;
    border: 2px solid #f7666b;
    background-color: #f7666b;
    color: #ffffff;
    cursor: pointer;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -o-border-radius: 24px;
    -moz-border-radius: 24px;
    -ms-border-radius: 24px;
  
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;        //pointer-events:none用来控制该标签的点击穿透事件
}


注意CSS里面的注释

时间插件之web开发

  • 2014年02月20日 11:14
  • 26KB
  • 下载

如何修改input type="file"样式

每个浏览器对上传文件 type="file"都有不同的显示效果,如何设置上传文件按钮让其显示效果一致呢? 这个其实很简单,只需要使用css样式即可。 1.创建一个,然后在这个里面创建 type="...
  • hua_ban_yu
  • hua_ban_yu
  • 2017-12-05 14:16:29
  • 1288

关于input不同type值的样式重置

所有type通用样式:.input-wrap input{ display: block; outline: none; -webkit-border-radius: 4px;...
  • wjnf012
  • wjnf012
  • 2017-05-26 20:00:22
  • 1917

如何修改input[type="file"]的默认样式

1.首先我们先来看一下input[type=”file”]默认的样子 2.改变input[type=”file”]默认的样子 这里我设置了 opacity: 0;使得 input变得不可见了.c...
  • Dear_Mr
  • Dear_Mr
  • 2017-02-20 22:06:04
  • 25155

设置input type为text的文本框样式

CSS 设置 input type="text" 标签的样式,而不会影响到 type="checkbox" 或其它input第一种解决办法:使用 JS 循环控制每个 type="text" 的文本框 ...
  • selfxd
  • selfxd
  • 2008-06-19 16:27:00
  • 8403

设置<input type="file">的默认样式

Web页面中,在需要上传文件时基本都会用到元素,它的默认样式: chrome下:   IE下:   不管是上面哪种,样式都比较简单,和很多网页的风格都不太协调。 根据用户的需求,设计风格,改变其显示样...
  • sndongcheng
  • sndongcheng
  • 2017-06-22 13:55:47
  • 1564

INPUT[type=text/password] 元素样式设置

不要试图通过设置 "size" 属性使 INPUT[type=text/password] 元素在所有浏览器中的宽度一致,这是不可能的。在需要对这类元素做精确的控制时,应使用 CSS 的 'width...
  • kong0609
  • kong0609
  • 2011-03-16 17:29:00
  • 1503

自定义input type=”radio”样式

input type="radio" name="sex" value="man" id="man" checked> label for="man">男label> input type="radi...
  • csdn9_14
  • csdn9_14
  • 2017-12-28 09:15:31
  • 224

html5 <input type='file' 样式修改

一直没有找到一个完美的修改 样式 , 比如说如何用图片代替丑陋的原声带按钮,现在找到一个号方法: 使用文字代替 上传文件 ...
  • xkjscm
  • xkjscm
  • 2017-08-07 20:56:15
  • 1875

改变input type file的默认样式

话说 1.原input设置透明opacity:0;使用position:absolute,使层重叠 2.用#videoUrl_1覆盖在原input上 3.覆盖层设置想要的样式 4.选择文件后的值显...
  • zhituji
  • zhituji
  • 2016-01-26 17:21:22
  • 4120
收藏助手
不良信息举报
您举报文章:【input[type=&quot;file&quot;】样式以及一些小问题
举报原因:
原因补充:

(最多只允许输入30个字)