怎么修改php中input type=file的样式

发布网友 发布时间：2022-04-30 20:46

我来回答

共3个回答

懂视网 时间：2022-05-13 15:44

1、都可以设置整体的宽度和高度，但在IE、火狐、Opera中设置宽度不影响浏览按钮的宽度；

2、谷歌中只要是input的区域单击可弹出窗口；IE（IE6中没试）中，单击浏览按钮可以弹出窗口，双击文本框区域可以弹出窗口；火狐和Opera中，单击input任何区域都可以弹出窗口；

3、设置input字体大小，IE、火狐、Opera的流量按钮都变大了（宽与高）。（这点很重要）；

从上面的共同特性来看，只要第三条是我们最需要的。

现在我们可以开始美化了：

思路：先用a标签做一个按钮，定好宽度并要加上overflow:hidden;属性，然后将放在a标签里面，通过定位，将input相对于a的右上角对齐，最后将input的透明度设为0即可。

为何要右上角对齐？

之所以右上角对齐是因为在IE、火狐、Opera中，鼠标放在文本框上鼠标呈文本状态，还有一个原因是IE中在文本区域中需要双击才能弹出窗口，这也是我利用上面提到的共同特性的第三点的原因。

示例代码如下：

这样各个浏览器的input浏览按钮的样式就达到了一致的效果，file按钮样式美化搞定。

热心网友 时间：2022-05-13 12:52

input type=file的样式因为html自带的上传按钮比较丑，所以可以用css对其优化

思路：

input file上传按钮的美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实现了美化功能。

DOM结构：

CSS样式1：

/*a  upload */
.a-upload {
   padding: 4px 10px;
   height: 20px;
   line-height: 20px;
   position: relative;
   cursor: pointer;
   color: #888;
   background: #fafafa;
   border: 1px solid #ddd;
   border-radius: 4px;
   overflow: hidden;
   display: inline-block;
   *display: inline;
   *zoom: 1
}

.a-upload  input {
   position: absolute;
   font-size: 100px;
   right: 0;
   top: 0;
   opacity: 0;
   filter: alpha(opacity=0);
   cursor: pointer
}

.a-upload:hover {
   color: #444;
   background: #eee;
   border-color: #ccc;
   text-decoration: none
}
样式2：

.file {
   position: relative;
   display: inline-block;
   background: #D0EEFF;
   border: 1px solid #99D3F5;
   border-radius: 4px;
   padding: 4px 12px;
   overflow: hidden;
   color: #1E88C7;
   text-decoration: none;
   text-indent: 0;
   line-height: 20px;
}
.file input {
   position: absolute;
   font-size: 100px;
   right: 0;
   top: 0;
   opacity: 0;
}
.file:hover {
   background: #AADFFD;
   border-color: #78C3F3;
   color: #004974;
   text-decoration: none;
}

修改之后

热心网友 时间：2022-05-13 14:10