去掉或者修改 input、select 等表单的【默认样式 】
隐藏input等表单的默认样式的背景:
textarea,select,input{-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none;}
让div看起来像按钮:
div
{
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari 和 Chrome */
}
使用css打造自定义select(非模拟)实现原理及样式
点评:使用appearance:none去除select的默认样式,配合使用gradient、background-size,background-position,拼出自定义的样式,大家可以发挥想象力做出绚丽的select 实现原理很简单:
1,使用appearance:none去除select的默认样式;
2,配合使用gradient、background-size,background-position,拼出自定义的样式
我定义的样式和浏览器默认给出的样式没多大差别,主要是简单实现一下,大家可以发挥想象力做出绚丽的select。
实现css如下:
代码如下:
select{
margin: 0;
padding: 0;
outline: none;
height: 25px;
line-height: 25px;
width: 120px;
border: rgb(191, 204, 220) 1px solid;
border-radius: 3px;
display: inline-block;
font: normal 12px/25px "微软雅黑", "SimSun", "宋体", "Arial";
background-size: 5px 5px,5px 5px,25px 25px,1px 25px;
background-image: repeating-linear-gradient(225deg,rgb(105,123,149) 0%,rgb(105,123,149) 50%,transparent 50%,transparent 100%),
repeating-linear-gradient(135deg,rgb(105,123,149) 0%,rgb(105,123,149) 50%,transparent 50%,transparent 100%),
linear-gradient( #FFFFFF 0%,#F8F9Fd, #EFFAFA 100%),
repeating-linear-gradient( rgb(191, 204, 220) 0%,rgb(191, 204, 220) 100%);
background-repeat: no-repeat;
background-position: 101px 10px,106px 10px,right top,92px top;
-webkit-appearance: none
更改select样式有如下几种方法:
(1)如果只是为了去掉select的下拉箭头的话,可以用css样式clip:rect(x x x x )来吧select的下拉箭头部分直接截取
掉。但是这种方法存在的问题就是,如果设置了select的border的话,截取就会把border也截去,很是不美观。
(2)还有一种方式应该是css2.0时候用的非常多的,就是利用div+css来模拟select的界面,这种方式的优点就是可
以制作出各种各样非常漂亮的select下拉框,但是缺点就是需要用javascript来实现select的实际功能。
(3)如果在CSS3 下要做一个稍微漂亮一点的select就相对容易了,因为CSS3下增加了border-image属性,可以设
置边框的图片,而且这个属性对于select来说是有很大的用处的,比如下面的这个样式的select:
是不是比系统自带的select样式漂亮很多啊,而且也可以制作各种漂亮的样式,而不需要使用javascript来模拟
select的功能,是不是很好啊!
在使用这种方法来修改select的界面之前需要了解一下border-image.
语法:border-image:url area type
参数:url 表示的是图片的路径
area 表示的是图片显示的区域,下面用一张图来解释比较方便(懒得画,贴了张别人的图)
例如 border-image: url("bord3.png") 10 15 20 25用图来表示就是下面的这张图了
这个东西有人说是叫九宫格,我也不太清楚是个什么东西,只是用来方便border-image的理解罢了。
不过也需要提醒一句的是虽然border-image: url("bord3.png") 10 15 20 25;的默认单位都是像素px,
但是在实际的使用中是不能带px的,可以使用百分比
type 表示的就是一些图片显示的样式 有三个值: stretch拉伸(默认值)repeat(重复) round(平铺)
表示的有两个方向:水平和垂直(顺序不要颠倒)。
eg: border-image: url("bord3.png") 10 15 20 25 stretch stretch;表示的是水平和垂直方向都为拉伸
关于border-image的理解我也有文章做介绍。
具体实现方法:
提供一张用于border-image的图片bord3.png
<select id='sel'>
<option>选项一</option> <option>选项二</option><option>选项三</option>
</select>
#sel{
-webkit-border-radius:5px ; -moz-border-radius:5px;
border-width:0px 21px 0px 5px;
-webkit-border-image:url("bord3.png") 0 21 0 5; -moz-border-image:url("bord3.png") 0 21 0 5px;
}
(4)还有一种方法也可以修改select的样式,但是仍然保留select的功能。其实这种方法也是很巧妙的,他的原理就是
在一个链接里加入一个select下拉列表,然后设置select为透明即可,将select以透明的形式放在链接中,在点击链接
的同时就触发了select的点击。
实现方式:
<a href="javascript:void(0)" class="selOuter">
<select class="sel">
<option >选项一</option><option>选项二</option>
</select>
</a>
.selOuter{position:relative;width:100px;height:35px;background:url("bord3.png");display:inline-block;}
.selOuter select{top:0px;left:0px;position:absolute;width:100px;height:35px;opacity:0;}
这里必不可少的就是设置外层链接a样式position:relative;因为只有外层设置了relative之后,里层的select才能以外层为基准去定位,而不是以body来定位。select必须设置的是position:absolute;top:0px;left:0px;主要的目的还是让select填充满
链接的整个区域,设置display:inline-block的目的是为了设置它的宽度,否则在非标准的状态下是不能给行内元素设置宽度和高度的。
去掉或者修改 input、select 等表单的【默认样式 】的更多相关文章
- A、B同时打开一个页面进行同一条数据库记录进行修改,A修改完成后提交表单,A修改的数据保存完成后;当B也修改完成后,提交数据进行数据修改。此时B修改的内容会覆盖A修改的内容,请问如何避免?
A.B同时打开一个页面进行数据中的一条数据进行修改,A修改完成后提交表单,数据修改保存完成后B开始页面也修改完成,开始提交进行修改.此时B修改的内容会覆盖A的内容,请问如何避免? 通过搜索和我个人总结 ...
- 防止表单提交时刷新页面-阻止form表单的默认提交行为
最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...
- jqueryd的post传递表单以及取消表单的默认传递
//取消表单的默认传递: <form method="post" onsubmit="return false;"> 在FORM属性里添加 onsu ...
- 【Qt开发】QT样式表单 qss的样式优化
QT样式表单 QT的样式表单允许我们在对程序不做任何代码上的更改的情况下轻松改变应用程序的外观. 其思想来源于网页设计中的CSS,即可以将功能设计和美学设计分开. 它的语法和概念和HTML CSS也是 ...
- 去除input标签点击时的默认样式
去除input标签点击时的默认样式的方法 outline:none; //去除点击时的边框 border : none; //去除input框的边框
- input、select等表单元素的对齐问题
今天在写页面时,发现了一个问题,当INPUT.SELECT及用图片做的button放在一起(并排放一起)时,没法子对齐,自己以不愿再加其他代码.也不愿使用JS来实现图片button的效果,试好半天,发 ...
- HTML 5 服务器发送事件、Input 类型、表单元素、表单属性
HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器 ...
- HTML5 学习08——Input 类型、表单元素及属性
注意:并不是所有的主流浏览器都支持新的input类型,不过您已经可以在所有主流的浏览器中使用它们了.即使不被支持,仍然可以显示为常规的文本域. (1)Input 类型: color color 类型: ...
- Html5中input新增的表单元素和属性介绍。
input标签主要用于Web表单的创建交互,以便接受来自用户的数据. 我们通过更改type属性的值,来实现不同的输入类型.在以前的写法中表单元素必须放在form元素所包含的里面,而在html5中,我们 ...
随机推荐
- MVC5 - ASP.NET Identity登录原理 - Claims-based认证和OWIN -摘自网络
在Membership系列的最后一篇引入了ASP.NET Identity,看到大家对它还是挺感兴趣的,于是来一篇详解登录原理的文章.本文会涉及到Claims-based(基于声明)的认证,我们会详细 ...
- jq 写法
<!doctype html> <html> <head> <meta charset="utf-8"> <script sr ...
- hibernate里createSQLQuery的addEntity()和setResultTransformer()方法
http://langgufu.iteye.com/blog/1565397 ————————————————————————————————————————————————————————————— ...
- leveldb
[LevelDB] LevelDB is a fast key-value storage library that provides an ordered mapping from string k ...
- 结构类模式(六):享元(Flyweight)
定义 运用共享技术有效的支持大量细粒度的对象. 两个状态 内蕴状态存储在享元内部,不会随环境的改变而有所不同,是可以共享的. 外蕴状态是不可以共享的,它随环境的改变而改变的,因此外蕴状态是由客户端来保 ...
- ASP.NET MVC- ActionFilter的使用
ActionFilter是穿插在Action执行过程,在Action执行前后提供扩展的功能.ActionFilter用途非常的广,用在页面压缩.缓存.错误处理,登陆验证. ActionFilter的实 ...
- ASP.NET读取配置文件发送邮件
之前写过一篇文章C#使用SMTP发送邮件 后来做了改进,改成读取独立的配置文件,本文只记录读取配置文件的部分,发送部分见上面的链接. 读取配置文件C#代码: using System; using S ...
- 用ILMerge.exe合并dll
F:\ILMerge>ILMerge /targetplatform:v4,"C:\WINDOWS\Microsoft.NET\Framework\v4.0.30319" / ...
- android: Incorrect line ending: found carriage return (\r) without corresponding newline (\n)
当报这种错误的时候:Incorrect line ending: found carriage return (\r) without corresponding newline (\n) 解决方法: ...
- UI:触摸事件 与 事件的回应
事件分类:晃动.触摸.远程控制(如遥控器.红外控制) 触摸开始时候的方法(判断单击,双击,三击事件可以写在这里) -(void)touchesBegan:(NSSet *)touches withEv ...