东莞有什么做网站的公司,微网站免费搭建平台,购物网站的策划,南宁伯才网络建站如何input[typefile]的样式在各个浏览器中的表现不尽相同#xff1a;
1. chrome: 2. firefox: 3. opera: 4. ie: 5. edge: 另外#xff0c;当我们规定 input[typefile] 的高度#xff0c;并把它的行高设置成与其高度相等后#xff0c;chrome中难看的样…input[typefile]的样式在各个浏览器中的表现不尽相同
1. chrome: 2. firefox: 3. opera: 4. ie: 5. edge: 另外当我们规定 input[typefile] 的高度并把它的行高设置成与其高度相等后chrome中难看的样式出现了 “未选择任何文件”这一行并没有竖直居中。
这些浏览器中的表现不一致我们必须做兼容处理。
思路
1. 自定义与其中一个浏览器表现类似的样式将其放在下层
2. 将浏览器本身的表现出来的样式“隐藏掉” opacity: 0; 置于上层这样我们点击的才是 input[typefile] 响应的事件
3. 选择文件或改变文件后改变显示 file 的值。
form action classactivityFormdiv classfilelabel forfile文件/labeldiv classuserdefined-fileinput typetext nameuserdefinedFile iduserdefinedFile value未选择任何文件button typebutton上传/button/divinput typefile namefile idfile /div
/form
.file {position: relative;height: 40px;line-height: 40px;
}
.file label {display: inline-block;
}
.userdefined-file {position: absolute;top: 0;left: 60px;z-index: 2;width: 300px;height: 40px;line-height: 40px;font-size: 0; /*应对子元素为 inline-block 引起的外边距*/
}
.userdefined-file input[typetext] {display: inline-block;vertical-align: middle;padding-right: 14px;padding-left: 14px;width: 220px;box-sizing: border-box;border: 1px solid #ccc;height: 40px;line-height: 40px;font-size: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
}
.userdefined-file button {display: inline-block;vertical-align: middle;width: 80px;text-align: center;height: 40px;line-height: 40px;font-size: 14px;background-color: #f54;border: none;color: #fff;cursor: pointer;
}
.file input[typefile] {position: absolute;top: 0;left: 60px;z-index: 3;opacity: 0;width: 300px;height: 40px;line-height: 40px;cursor: pointer;
}
document.getElementById(file).onchange function() {document.getElementById(userdefinedFile).value document.getElementById(file).value;
}
这样处理后就在各个浏览器中表现一致了
1. 未选择任何文件时在 chrome 中 2. 在选择文件后在 firefox 中
