css

最新推荐文章于 2022-11-30 21:37:28 发布

天蓝蓝风轻轻

最新推荐文章于 2022-11-30 21:37:28 发布

阅读量141

点赞数

分类专栏： CSS

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

td  
{  
 white-space: nowrap;  
}  //html 使表格随着内容自动适应宽度

CSS美化 input type=file 兼容各个浏览器
HTML

<FORM><A class=btn_addPic href="javascript:void(0);"><SPAN><EM>+</EM>添加图片</SPAN> <INPUT class=filePrew title=支持jpg、jpeg、gif、png格式，文件小于5M tabIndex=3 type=file size=3 name=pic></A></FORM>

CSS

*{margin:0;padding:0;} 
a{text-decoration:none;} 
.btn_addPic{ 
display: block; 
position: relative; 
width: 140px; 
height: 39px; 
overflow: hidden; 
border: 1px solid #EBEBEB; 
background: none repeat scroll 0 0 #F3F3F3; 
color: #999999; 
cursor: pointer; 
text-align: center; 
} 
.btn_addPic span{display: block;line-height: 39px;} 
.btn_addPic em { 
background:url(http://p7.qhimg.com/t014ce592c1a0b2d489.png) 0 0; 
display: inline-block; 
width: 18px; 
height: 18px; 
overflow: hidden; 
margin: 10px 5px 10px 0; 
line-height: 20em; 
vertical-align: middle; 
} 
.btn_addPic:hover em{background-position:-19px 0;} 
.filePrew { 
display: block; 
position: absolute; 
top: 0; 
left: 0; 
width: 140px; 
height: 39px; 
font-size: 100px; /* 增大不同浏览器的可点击区域 */ 
opacity: 0; /* 实现的关键点 */ 
filter:alpha(opacity=0);/* 兼容IE */ 
}

改变 input file 样式（input  文件域）是很多前端朋友经常遇到的头疼问题，今天推荐两种改变 input file 样式的两种常用方法：



方法一：

<input type="text" size="20" name="upfile" id="upfile" style="border:1px dotted #ccc">  

<input type="button" value="浏览" onclick="path.click()" style="border:1px solid #ccc;background:#fff">  
<input type="file" id="path" style="display:none" onchange="upfile.value=this.value">


也可以写成这样：


<style type="text/css">
<!--
#input1{border:1px solid #0000FF}
#btn1{width:70px;height:21px;font-size:12px;padding-top:3px; background:url(83.gif) no-repeat; height:22px; border:0;}
//-->
</style>


<body><input type="text" id="input1">
<input name="button" type="button" id="btn1" onclick="myfile.click();" value="浏览文档" />
<input type="file" id="myfile" onchange="input1.value=this.value" style="display:none">
</body>


方法二：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=gb2312" />
<meta http-equiv="content-language" content="zh-cn" />
<meta name="robots" content="all" />
<meta name="keywords" content="关键字描述" />
<meta name="description" content="站点描述" />
<meta name="author" content="我们,we@126.com" />
<meta name="copyright" content="版权所有" />


<title>css+js定义input的file浏览按钮样式兼容FireFox</title>
<style type="text/css">
<!--
*{ margin:0; padding:0; border:0;}
body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体; padding:20px;}li{list-style:none;}
.clearfix:after{content:"&nbsp;";display:block;height:0;clear:both;visibility:hidden;}.clearfix{*display:inline-block;}


.text{ border:1px solid #999;height:16px; width:300px; font-family:verdana; font-size:12px;padding-top:2px; float:left;margin-right: 5px;}
.file{ width:67px;overflow:hidden; background:url(83.gif); height:22px; *vertical-align:3px; overflow:hidden; float:left;}
#file{ width:0; height:20px;margin-left: -154px;*margin-left:-3px; filter:alpha(opacity=0);-moz-opacity:.0;opacity:0.0; cursor:pointer;}
-->
</style>
</head>
<body>
<input type="text" class="text" id="text"/>
<span class="file"><input id="file" type="file" /></span>
<script type="text/javascript">
<!--
var file = document.getElementById("file");
var text = document.getElementById("text");
file.onchange = type;
function type()
{text.value = file.value;}
-->
</script>
</body>
</html>

除bootstrap table table-bordered表格部分边框

/* 尝试过程1： */  
.table tr td {bordr: none !important;}  

/* 尝试过程2： */  
.table tr td {bordr: 0 !important;}  

/* 以上都未果，没用什么变化。 */  

/* 另一种尝试通过，把边框变成透明的。 */  
.no-border {  
  border: 1px solid transparent !important;  
}  

.no-part-border {  
  border-right: 1px solid transparent !important;  
}