『壹』 前端怎麼修改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中的變數,並使用,這樣可達到一起切換主題效果