怎么修改php中input type=file的样式

 我来答
骑王子特斯拉
2015-07-27 · 知道合伙人软件行家
骑王子特斯拉
知道合伙人软件行家
采纳数:360 获赞数:2021
某度最佳知道合伙人

向TA提问 私信TA
展开全部

input type=file的样式因为html自带的上传按钮比较丑,所以可以用css对其优化

思路:

input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能。

DOM结构:

<a href="javascript:;" class="a-upload">
    <input type="file" name="" id="">点击这里上传文件
</a>

<a href="javascript:;" class="file">选择文件
    <input type="file" name="" id="">
</a>

CSS样式1:

/*a  upload */
.a-upload {
   padding: 4px 10px;
   height: 20px;
   line-height: 20px;
   position: relative;
   cursor: pointer;
   color: #888;
   background: #fafafa;
   border: 1px solid #ddd;
   border-radius: 4px;
   overflow: hidden;
   display: inline-block;
   *display: inline;
   *zoom: 1
}

.a-upload  input {
   position: absolute;
   font-size: 100px;
   right: 0;
   top: 0;
   opacity: 0;
   filter: alpha(opacity=0);
   cursor: pointer
}

.a-upload:hover {
   color: #444;
   background: #eee;
   border-color: #ccc;
   text-decoration: none
}
样式2:

.file {
   position: relative;
   display: inline-block;
   background: #D0EEFF;
   border: 1px solid #99D3F5;
   border-radius: 4px;
   padding: 4px 12px;
   overflow: hidden;
   color: #1E88C7;
   text-decoration: none;
   text-indent: 0;
   line-height: 20px;
}
.file input {
   position: absolute;
   font-size: 100px;
   right: 0;
   top: 0;
   opacity: 0;
}
.file:hover {
   background: #AADFFD;
   border-color: #78C3F3;
   color: #004974;
   text-decoration: none;
}

修改之后

           

匿名用户
2014-11-08
展开全部
1、如果你用过smarty模板引擎、MVC类似框架如tp,那么你自己写一个框架噢!
2、你要对php的继承实现以及其中的小知识点熟知;
3、先列出你的框架目录,什么地方放什么,然后写你的配置文件
4、用到的高频函数有:require 、 require_once 、 file_exites等!
如:sybase_connect连上数据库。
语法: int sybase_connect(string [servername], string [username], string [password]);
返回值: 整数函数种类: 数据库功能 本函数用来打开与 Sybase 数据库的连接。
参数 servername 为欲连上的数据库服务器名称。
参数 username 及 password 可省略,分别为连接使用的帐号及密码。
使用本函数需注意早点关闭数据库,以减少系统的负担。
连接成功则返回数据库的连接代号,失败返回 false 值。
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式