input美化问题
对于前端来说,一个比较大的问题是,当HTML提供的最原始的控件长的很丑可是又没有相应的属性去更改,碰到这个问题时我们应该怎么办?比如radio的那个单选框我觉得好丑啊,怎么办呢?一个很好的思路就是把它隐藏掉(透明度设为0),用美观的图片或者能用CSS3来实现的东西代替,而实际的触发事件还是传给被隐藏的原始控件。
(先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能。)
之前碰到一个问题就是HTML中的<input type="file" />这个问题,当时同事问我,我一下也想不出头绪,后来同事给解决了,就是把这个input给隐藏掉用新的div写一个button出来然后将点击事件传给被隐藏掉的input,机智!于是我就自己查了一下,记录下来。
我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox美化,input radio美化是一个道理的。
HTML布局
<a href="javascript:;" class="a-upload">
<input type="file" name="" id="">点击这里上传文件
</a>
CSS样式,具体颜色线条样式不写,只写关键样式
.a-upload {
cursor: pointer;
display: inline-block;
*display: inline;
*zoom: 1
} .a-upload input {
opacity:;
filter: alpha(opacity=0);
} .a-upload:hover {
text-decoration: none
}
radio同理
HTML
<span class="test_list_span on">
<input type="radio" checked="checked" name="truelist" value="1" class="true_list">
</span>
CSS
.test_list_span {
cursor: pointer;
text-align: center;
background-image: url(images/test-img_unselected.gif);
background-repeat: no-repeat;
}
.true_list {
opacity:;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.on {
background-image: url(images/test-img_selected.gif);
}
文章来源:
http://www.haorooms.com/post/css_input_uploadmh
http://www.haorooms.com/post/css_mh_ck_radio
input美化问题的更多相关文章
- input美化 checkbox和radio样式
input美化 checkbox和radio样式 看惯了input[checkbox]和input[radio]默认样式,有没有想要改变一下呢?比如下面的样式: 比起html默认的样式,上图这些 ...
- input美化上传按钮美化
今天工作需求碰到 样式改变上传按钮 效果: <a href="javascript:;" class="a-upload"> <input t ...
- CSS - input 美化
input{ padding: 20px; width: 100%; height: 5vh; margin-bottom: 2vh; border-radius: 10vw; border: 0; ...
- CSS实现input默认文字灰色有提示文字点击后消失鼠标移开显示
CSS实现input美化操作默认是为灰色,并且有提示 如下图 鼠标点击后文字消失,鼠标移开后文字显示 给input入下图添加代码 style="color:#cccccc; outline: ...
- input框focus时的美化效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- input上传按钮美化
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- css input[type=file] 样式美化,input上传按钮美化
css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh
- input的file 控件及美化
在一些网站进行上传时,当单击了“浏览”按钮之后会弹出[选择文件]的对话框.想要实现这一功能,用input的file控件来实现就好啦~ <!doctype html> <html la ...
- input file美化,文件上传
此文学习至:http://www.haorooms.com/post/input_file_leixing 然而只会用,不会做,UI泪茫茫 效果图: 原图: 美化后: 此主要用css美化表单,然后用J ...
随机推荐
- 结对作业_Two
Part 1.前言 (附:本次编码涵盖的所有功能均为java语言实现) 结对项目作业 结对同学高裕翔的博客 个人github传送门 博文pdf链接 Part 2.具体分工 本次的结对作业我们简单的拆分 ...
- Task Class .net4.0异步编程类
文章:Task Class 地址:https://docs.microsoft.com/zh-cn/dotnet/api/system.threading.tasks.task?view=netfra ...
- WPF/MVVM快速指引
简介 最近微软推出了UWA,又是一波新的C#+xaml学习热.好多小伙伴都对MVVM感觉很好奇,但是有些地方也有点难以理解.特意写了这边文章,希望对你有帮助. 这边文章会很长,所以我会用几个例子的形式 ...
- Java web 强制301跳转
response.setStatus(HttpServletResponse.SC_MOVED_PERMANENTLY); response.setHeader("Location" ...
- 第117天:Ajax实现省市区三级联动
Ajax实现省市区三级联动 思路: (1)首先获取省份信息 (2)发起Ajax请求,注意dataType中的T大写 (3)封装回调函数,回调函数success中用$.each循环每一条数据,动态创建o ...
- BZOJ 1799 同类分布(数位DP)
给出a,b,求出[a,b]中各位数字之和能整除原数的数的个数.1<=a<=b<=1e18. 注意到各位数字之和最大是153.考虑枚举这个东西.那么需要统计的是[0,a-1]和[0,b ...
- shell脚本学习—正则表达式
正则表达式概念.特点 正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”, 这个“规则字符串”用来表达对字符串的一种过滤辑. 给定一个 ...
- 【Java】数据库查询的数据直接以指定文件类型下载到本地(弹出下载框)
欲实现的功能目标:当点击下图的导出数据文件时弹出文件下载框,默认csv格式,用户自定义下载的本地路径 遇到的问题: 1.项目之前做过一次下载,但是是使用了本地文件模板.用输入流读取文件模板,插入数据, ...
- BZOJ4883 棋盘上的守卫(环套树+最小生成树)
容易想到网络流之类的东西,虽然范围看起来不太可做,不过这提供了一种想法,即将行列分别看做点.那么我们需要找一种连n+m条边的方案,使得可以从每条边中选一个点以覆盖所有点.显然每个点至少要连一条边.于是 ...
- [POI2012]OKR-A Horrible Poem hash
题面:洛谷 题解: 首先我们需要知道一个性质,串s的最小循环节 = len - next[len].其中next[len]表示串s的一个最长长度使得s[1] ~ s[next[len]] == s[l ...