‘壹’ 前端怎么修改input file的默认样式
html文件：
<div class="fileBox">
<div class="fileName"></div>
<button class="fileButton">选择文件</button>
<input type="file" class="file1">
</div>
<div class="fileBox">
<div class="fileName"></div>
<button class="fileButton">选择文件</button>
<input type="file" class="file2">
</div>
css文件：
.fileBox{
position: relative;
display: inline-block;
}
.fileButton{
display: inline-block;
width: 80px;
height: 34px;
line-height: 34px;
background: #FFA837;
border-radius: 0px 4px 4px 0px;
text-align: center;
color: #fff;
vertical-align: top;
}
.file1,.file2{
width: 80px;
height: 34px;
position: absolute;
top: 0px;
right: 0px;
opacity: 0;
filter:Alpha(opacity=0); /*透明度兼容IE8*/
vertical-align: top;
}
.fileName{
display: inline-block;
width: 150px;
height: 34px;
line-height: 34px;
padding:0px 5px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
border: 1px solid #eee;
vertical-align: top;
float: left;
}
js文件：
function upFile(fileX){
var path;
var fileName;
var file=fileX;
var fileFrame=fileX.parent(".fileBox").children(".fileName");
path=file.val();
//path为获取的<input type="file">的文件名或文件路径
//火狐获取的是文件名，所以pos=-1,chrome和IE获取的是文件路径
if(path!=''){
var pos1 = path.lastIndexOf('/');
var pos2 = path.lastIndexOf('\\');
var pos = Math.max(pos1, pos2)
if( pos<0 ){
fileName =path;
fileFrame.text(fileName);
fileFrame.attr("title",fileName);
}
else{
fileName=path.substring(pos+1);//截取从pos+1索引到末尾
fileFrame.text(fileName);
fileFrame.attr("title",fileName);
}
}
}
调用：
$(".file1").change(function(){
upFile($(this));
});
$(".file2").change(function(){
upFile($(this));
});
以后只要调用upFile()就可以了
兼容：IE8+，firefox,chrome
‘贰’ web前端，输入选择框选中状态下的css样式如何改
CSS可以完成这个效果，但需要高版本的浏览器支持，兼容性不是特别好。
使用的代码就是 input:hover 或者 input:focus 这两个语法就可以。
‘叁’ 前端切换主题颜色的几种思路
如果主题提前配置好是固定的：
1.采用配置不同theme的css文件，使用scss+替换body的class命名空间进行样式覆盖
setting.scss
common.scss
最后形成两个主题文件后，修改body的class就可达到切换主题的目的
2.引用不同的link文件，与上述同理先形成css文件，通过动态改变link引用达到切换主题目的
如果主题不固定的，可借用webpack插件：webpack-theme-color-replacer实现：
vue-cli3配置
app-config.js文件
配置babel.config.js
在utils文件中定义一个themeColorClient.js 用于初始化主题色和记录主题色
除了修改elementUI主题色之外，我们还需要配置其他自己写的样式，需要用到element ui中定义的一些变量
可通过引用@import "../../../node_moles/element-ui/packages/theme-chalk/src/common/var.scss"; 获得element-ui中的变量，并使用，这样可达到一起切换主题效果