对于前端来说,一个比较大的问题是,当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美化问题的更多相关文章

  1. input美化 checkbox和radio样式

    input美化    checkbox和radio样式 看惯了input[checkbox]和input[radio]默认样式,有没有想要改变一下呢?比如下面的样式: 比起html默认的样式,上图这些 ...

  2. input美化上传按钮美化

    今天工作需求碰到 样式改变上传按钮 效果: <a href="javascript:;" class="a-upload"> <input t ...

  3. CSS - input 美化

    input{ padding: 20px; width: 100%; height: 5vh; margin-bottom: 2vh; border-radius: 10vw; border: 0; ...

  4. CSS实现input默认文字灰色有提示文字点击后消失鼠标移开显示

    CSS实现input美化操作默认是为灰色,并且有提示 如下图 鼠标点击后文字消失,鼠标移开后文字显示 给input入下图添加代码 style="color:#cccccc; outline: ...

  5. input框focus时的美化效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. input上传按钮美化

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. css input[type=file] 样式美化,input上传按钮美化

    css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh

  8. input的file 控件及美化

    在一些网站进行上传时,当单击了“浏览”按钮之后会弹出[选择文件]的对话框.想要实现这一功能,用input的file控件来实现就好啦~ <!doctype html> <html la ...

  9. input file美化,文件上传

    此文学习至:http://www.haorooms.com/post/input_file_leixing 然而只会用,不会做,UI泪茫茫 效果图: 原图: 美化后: 此主要用css美化表单,然后用J ...

随机推荐

  1. 结对作业_Two

    Part 1.前言 (附:本次编码涵盖的所有功能均为java语言实现) 结对项目作业 结对同学高裕翔的博客 个人github传送门 博文pdf链接 Part 2.具体分工 本次的结对作业我们简单的拆分 ...

  2. Task Class .net4.0异步编程类

    文章:Task Class 地址:https://docs.microsoft.com/zh-cn/dotnet/api/system.threading.tasks.task?view=netfra ...

  3. WPF/MVVM快速指引

    简介 最近微软推出了UWA,又是一波新的C#+xaml学习热.好多小伙伴都对MVVM感觉很好奇,但是有些地方也有点难以理解.特意写了这边文章,希望对你有帮助. 这边文章会很长,所以我会用几个例子的形式 ...

  4. Java web 强制301跳转

    response.setStatus(HttpServletResponse.SC_MOVED_PERMANENTLY); response.setHeader("Location" ...

  5. 第117天:Ajax实现省市区三级联动

    Ajax实现省市区三级联动 思路: (1)首先获取省份信息 (2)发起Ajax请求,注意dataType中的T大写 (3)封装回调函数,回调函数success中用$.each循环每一条数据,动态创建o ...

  6. BZOJ 1799 同类分布(数位DP)

    给出a,b,求出[a,b]中各位数字之和能整除原数的数的个数.1<=a<=b<=1e18. 注意到各位数字之和最大是153.考虑枚举这个东西.那么需要统计的是[0,a-1]和[0,b ...

  7. shell脚本学习—正则表达式

    正则表达式概念.特点 正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”, 这个“规则字符串”用来表达对字符串的一种过滤辑. 给定一个 ...

  8. 【Java】数据库查询的数据直接以指定文件类型下载到本地(弹出下载框)

    欲实现的功能目标:当点击下图的导出数据文件时弹出文件下载框,默认csv格式,用户自定义下载的本地路径 遇到的问题: 1.项目之前做过一次下载,但是是使用了本地文件模板.用输入流读取文件模板,插入数据, ...

  9. BZOJ4883 棋盘上的守卫(环套树+最小生成树)

    容易想到网络流之类的东西,虽然范围看起来不太可做,不过这提供了一种想法,即将行列分别看做点.那么我们需要找一种连n+m条边的方案,使得可以从每条边中选一个点以覆盖所有点.显然每个点至少要连一条边.于是 ...

  10. [POI2012]OKR-A Horrible Poem hash

    题面:洛谷 题解: 首先我们需要知道一个性质,串s的最小循环节 = len - next[len].其中next[len]表示串s的一个最长长度使得s[1] ~ s[next[len]] == s[l ...