html判断文本框和按钮,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样式之区分input是按钮还是文本框的方法相关推荐

html css文本框按钮,css样式之区分input是按钮还是文本框的方法
当你看到这个html标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框?一个复选框?--对,对,对,它们都对.也许你可能想不到,这个小小的input竟然可以创造出10个不同的东西,下面是个列表 ...
html网页登录红色按钮,CSS让网页提交input按钮与众不同
CSS让网页提交input按钮与众不同互联网发布时间:2009-04-02 19:36:01 作者:佚名我要评论网页制作Webjx文章简介:你是不是觉得自己的主页不够靓丽,想让它有 ...
PHP设置按钮不可用,css怎么控制按钮不可用,button按钮css样式
css怎么控制按钮不可用CSS怎么控制按钮不可用,方法:添加"pointer-event 3360 none:"按钮元素样式,以使按钮元素永远不会成为鼠标事件的目标,并使其单击事件 ...
miniui影响css样式,MiniUI操作input下拉框和datagrid的基础
最近因为工作需要,经常和miniui打交道,发现虽然网上有提供案例和完整api,但是有些细节的地方没有详细的解析,这里将最近用到的比较实用的东西整理出来(部分内容参照了miniui的官方api): 1 ...
css表格文本居中的指令,CSS似乎无法在表格单元中居中文本
我使用所有此代码,因为它正在更改现有网站的行为和外观,所以我无法触及代码结构(请参阅HTML).我所能碰到的只有CSS(也就是为什么你看到这么多!重要,覆盖) 现在我遇到的问题是我似乎无法将tabe- ...
php按钮css样式,CSS 按钮
CSS 按钮本章节我们为大家介绍使用 CSS 来制作按钮. 我们先看一下默认按钮和用css制作的按钮html> php中文网(php.cn) .button { background-colo ...
[JS]JS模拟Alert弹出框效果--自定义CSS样式
function alertMsg(msg, mode) { //mode为空,即只有一个确认按钮,mode为1时有确认和取消两个按钮msg = msg || '';mode = mode || 0; ...
html好看的按钮css样式大全,css3教程_五种漂亮样式，CSS3动画按钮效果
CSS代码: .button01 { width: 200px; margin: 50px auto 20px auto; } .button01 a { display: block; height ...
html5 按钮css样式修改,css样式制作的漂亮按钮
复制代码代码如下: Demo: CSS3 Buttons body { background: #ededed; width: 900px; margin: 30px auto; color: #99 ...
html 原生弹出框,html、css和js原生写一个模态弹出框，顺便解决父元素半透明子元素不透明效果...
模态框: html部分: 弹出框 hhhhh 取消确认 css部分: #box{ width: 80px; height: 40px; background: #fd7430; border:non ...

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

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

最新文章

热门文章