仓酷云

标题: 来看看：css丑化input file按钮的办法 [打印本页]
作者: 飘灵儿    时间: 2015-1-16 00:07
标题: 来看看：css丑化input file按钮的办法
CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。
我们在做表单的情形下，input、textarea、button的款式对照简单界说，select和inputfile的款式难以界说。
inputfile在体系默许下的表面：

来看看：css丑化input file按钮的办法
登录/注册后可看大图
我们最多经由过程界说input的border来改动体系默许的表面：

来看看：css丑化input file按钮的办法
登录/注册后可看大图

假如要让扫瞄按钮更大度一点，我们想界说它的背景色彩，乃至想用背景图片来取代，经由过程css界说inputflie还真是办不到的。偶尔看到一篇文章：inputfile文件选择框丑化作者是把体系默许的按钮设置通明度为0，再界说一个label标签款式，来掩盖通明失落的按钮。

依照作者的办法，我也实验了一下，代码以下：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>inputfile的另类做法</title>
<styletype="text/css">
<!--
*{font-size:12px}
body{margin:0}
.line{position:relative;float:left;padding:8px0}
.linespan{float:left}
input{border:1pxsolid#888;vertical-align:middle}
.file{position:absolute;left:90px;top:8px;display:none;filter:alpha(opacity=0);opacity:0}
.file1{padding:2px10px;display:block;float:left;background:#FF66CC;color:#fff;z-index:1;margin-left:5px;vertical-align:middle;cursor:pointer}
.inputstyle{width:150px;border:1pxsolid#888;z-index:99}
-->
</style>
</head>
<body>
<divclass="line"><span>
<label>上传文件：</label>
<inputname=""type="text"id="viewfile"onmou搜索引擎优化ut="document.getElementById(upload).style.display=none;"class="inputstyle"/>
</span>
<labelfor="unload"onmou搜索引擎优化ver="document.getElementById(upload).style.display=block;"class="file1">扫瞄...</label>
<inputtype="file"onchange="document.getElementById(viewfile).value=this.value;this.style.display=none;"class="file"id="upload"/>
</div>
</body>
</html>

效果:
来看看：css丑化input file按钮的办法
登录/注册后可看大图
固然多了良多标签，但这类移花接木的做法仍是值得研讨。有无更好、更迷信的作法另有待开掘。
表现和结构分离，在团队开发中更容易分工合作而减少相互关联性
作者: 蒙在股里    时间: 2015-1-18 05:15
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
作者: 若相依    时间: 2015-1-18 05:15
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。
作者: 乐观    时间: 2015-1-25 14:07
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
作者: admin    时间: 2015-2-2 22:30
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
作者: 灵魂腐蚀    时间: 2015-2-8 17:13
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。
作者: 小魔女    时间: 2015-2-25 21:55
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
作者: 爱飞    时间: 2015-3-8 08:40
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
作者: 兰色精灵    时间: 2015-3-15 22:29
直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
作者: 活着的死人    时间: 2015-3-22 17:31
只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。



欢迎光临 仓酷云 (http://ckuyun.com/) Powered by Discuz! X3.2