对于前端来说,一个比较大的问题是,当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. tensorflow训练线性回归模型

    tensorflow安装 tensorflow安装过程不是很顺利,在这里记录一下 环境:Ubuntu 安装 sudo pip install tensorflow 如果出现错误 Could not f ...

  2. (一)MySQL基础篇

    1.mysql简介 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库. 主流的数据库有:sqlserver,mysql,Oracle.SQLite.Access.MS SQL Se ...

  3. Dsyy的第一篇博文~

    2017-08-07  周一  晴热热热热热 咳咳,很多人看到dsyy第一反应是什么意思?当然是大神媛媛!显然不是些(diao)(si)yy.(da)(si)yy...的别义,咋有点此地无银三百两的感 ...

  4. inux下mysql的root密码忘记解决方法

    1.首先确认服务器出于安全的状态,也就是没有人能够任意地连接MySQL数据库. 因为在重新设置MySQL的root密码的期间,MySQL数据库完全出于没有密码保护的 状态下,其他的用户也可以任意地登录 ...

  5. windows(32位 64位)下python安装mysqldb模块

    windows(32位 64位)下python安装mysqldb模块 www.111cn.net 编辑:mengchu9 来源:转载 本文章来给各位使用在此windows系统中的python来安装一个 ...

  6. elasticsearch6 学习之基础CURD

    环境:elasticsearch6.1.2        kibana6.1.2  基础概念: 1._index元数据 (1)代表一个document存放在哪个index中(2)类似的数据放在一个索引 ...

  7. Building simple plug-ins system for ASP.NET Core(转)

    Recently I built plug-ins support to my TemperatureStation IoT solution web site. The code for .NET ...

  8. P1065 作业调度方案

    题目描述 我们现在要利用m台机器加工n个工件,每个工件都有m道工序,每道工序都在不同的指定的机器上完成.每个工件的每道工序都有指定的加工时间. 每个工件的每个工序称为一个操作,我们用记号j−k表示一个 ...

  9. 洛谷P3938 斐波那契

    题目戳 题目描述 小 C 养了一些很可爱的兔子. 有一天,小 C 突然发现兔子们都是严格按照伟大的数学家斐波那契提出的模型来进行 繁衍:一对兔子从出生后第二个月起,每个月刚开始的时候都会产下一对小兔子 ...

  10. C#中string[]数组和list<string>泛型的相互转换 【转】

    http://www.cnblogs.com/szjdw/archive/2012/03/09/2387885.html 1,从System.String[]转到List<System.Stri ...