html css文本框按钮,css样式之区分input是按钮还是文本框的方法

当你看到这个html标签的时候，你会想到什么？一个文本框？一个按钮？一个单选框？一个复选框？……对，对，对，它们都对。也许你可能想不到，这个小小的input竟然可以创造出10个不同的东西，下面是个列表，看看，哪些是你没有想到的：

文本框

密码框

提交按钮

重置按钮

单选框

复选框

普通按钮

文件选择控件

隐藏框

图片按钮

所以你可能会说，input真是一个伟大的东西，竟然这么有“搞头”，但是当你真正在项目中试图给不同的控件设置不同的样式时，你就会发现，input真的可以把“你的头搞大”。我不知道为什么当初要给input赋予那么多身份，但是，他的“N重身份”给网站设计者的确带来了不少的麻烦。好在，劳动人民是伟大的，解决问题的办法还是有滴～，虽然它们都有各自致命的缺点 Orz… 解放方法大致归纳一下，列表如下(小弟才疏，错误遗漏难免，还请各位高人指点)：

1.用css的expression判断表达式

2.用css中的type选择器

3.用javascript脚本实现

4.如果你用Microsoft Visual Studio 2005 或者后续版本开发项目，恭喜，你还可以使用skin。

下面就来讲解一下各个办法的详细实现和它们的优缺点。

1：用css的expression判断表达式

实现代码参考：

html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">diffInput2input{background-color:expression(this.type=="text"?'#FFC':'');}

This is normal textbox:
This is normal button:

html css文本框按钮,css样式之区分input是按钮还是文本框的方法相关推荐

html密码框怎么添加小图标,JS Input里添加小图标的两种方法
我们在做网页的时候,经常需要在input里面添加小图标,那么这里就介绍比较常见的两种方法. 方法一将小图标当做input的背景来插入,直接上代码吧: *{ margin: 0; padding: 0 ...
css文字自动换行及css文字相关属性
white-space: normal; normal:忽略多余的空白,元素内如果有多个空格在一起或换行符(回车键),浏览器会把其看作一个空格来处理,不会影响自动换行(就是元素内容过长,在一行上显示不 ...
web前端入门学习 css（7）css高级技巧（精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化）
文章目录精灵图为什么需要精灵图? 精灵图的使用精灵图课堂案例用精灵图拼出自己的名字字体图标字体图标的下载字体图标的引入字体图标的追加 css三角(用边框border制作) 案例:京东三 ...
css文本框圆角不兼容,CSS教程之重置默认样式与IE兼容圆角的解决方法
CSS教程之重置默认样式与IE兼容圆角的解决方法 IE兼容css教程3圆角的htc解决方法现在css3的border-radius属性可以很方便的实现圆角功能,对网站前台人员无疑是一件喜事,但悲剧的 ...
CSS笔记（字体样式，文本属性和颜色样式）
1 字体样式 1.1 字体系列(font family) 在CSS中,字体划分为五组"字体系列",分别为: sans-serif字体系列:没有衬线的字体,最常用不为过,如 Ari ...
CSS选择器补充，CSS三大特性以及字体、文本样式。
在昨天基础上补充的三个选择器伪元素选择器使用伪元素来表示元素中的一些特殊的位置 ::after 表示元素的最后边的部分一般需要结合content这个样式一起使用, 通过conte ...
微信小程序点击改变css,微信小程序按钮button样式修改自定义
在微信小程序中,当我们向页面中插入一个按扭button的时侯只需要简单的代码就可以了. 插入button按钮并保存后,便可以以预览界面看到一个原始的按钮. 小程序样式修改默认没有对按钮设置任何样式时 ...
html怎么调搜索框宽高,百度站内搜索css：输入框宽度及样式自定义
近日网站使用了百度站内搜索api,目的是为了提高站内搜索的速度,减轻查询站内数据库带来的服务器压力. 不过在使用百度站内搜索api(生效范围:*webkaka.com/*)后发现一个问题,不同的频道模 ...
html给radio添加图片,使用纯CSS自定义radio(单选框)和checkbox（多选框）的样式
radio和checkbox由于不同的浏览器显示的样式不一致,因此我们需要自定义radio(单选框)和checkbox(多选框)的样式.基本原理就是贱radio和checkbox的自定义样式设置成图片 ...

html css文本框按钮,css样式之区分input是按钮还是文本框的方法

html css文本框按钮,css样式之区分input是按钮还是文本框的方法相关推荐

最新文章

热门文章