css样式控制区分input是按钮还是文本框的方法大全
对设置样式时怎么区分input是按钮还是文本框问题的技术调查——把input里面的东西剔出来
当你看到<input>这个html标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框?一个复选框?……对,对,对,它们都对。也许你可能想不到,这个小小的input竟然可以创造出10个不同的东西,下面是个列表,看看,哪些是你没有想到的:
<input type="text" /> 文本框
<input type="password" /> 密码框
<input type="submit" /> 提交按钮
<input type="reset" /> 重置按钮
<input type="radio" /> 单选框
<input type="checkbox" /> 复选框
<input type="button" /> 普通按钮
<input type="file" /> 文件选择控件
<input type="hidden" /> 隐藏框
<input type="image" /> 图片按钮
所以你可能会说,input真是一个伟大的东西,竟然这么有“搞头”,但是当你真正在项目中试图给不同的控件设置不同的样式时,你就会发现,input真的可以把“你的头搞大”。我不知道为什么当初要给input赋予那么多身份,但是,他的“N重身份”给网站设计者的确带来了不少的麻烦。好在,劳动人民是伟大的,解决问题的办法还是有滴~,虽然它们都有各自致命的缺点 Orz… 解放方法大致归纳一下,列表如下:
用css中的type选择器
实现参考代码:
- <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <title> diffInput2 </title>
- <meta name="Author" content="JustinYoung"/>
- <meta name="Keywords" content=""/>
- <meta name="Description" content=""/>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <style type="text/css">
- input[type="text"]
- {
- background-color:#FFC;
- }
- input[type="password"]
- {
- background-image:url(BG.gif);
- }
- input[type="submit"]
- {
- background-color:blue;
- color:white;
- }
- input[type="reset"]
- {
- background-color:navy;
- color:white;
- }
- input[type="radio"]
- {
- /*In FF,Some radio style like background-color not been supported*/
- margin:10px;
- }
- input[type="checkbox"]
- {
- /*In FF,Some checkbox style like background-color not been supported*/
- margin:10px;
- }
- input[type="button"]
- {
- background-color:lightblue;
- }
- </style>
- </head>
- <body>
- <dl>
- <dt>This is normal textbox:<dd><input type="text" name="">
- <dt>This is password textbox:<dd><input type="password" name="">
- <dt>This is submit button:<dd><input type="submit">
- <dt>This is reset button:<dd><input type="reset">
- <dt>This is radio:<dd><input type="radio" name="ground1"> <input type="radio" name="ground1">
- <dt>This is checkbox:<dd><input type="checkbox" name="ground2"> <input type="checkbox" name="ground2">
- <dt>This is normal button:<dd><input type="button" value="i'm button">
- </dl>
- </body>
- </html>
原文地址:http://www.35ui.cn/post/20100608718.html 标签:html网页培训班静态网页模板制作ps网页切图ps切图css网页培训班jQuery教程网站栏目策划方案做网站个人
上一条: CSS样式表的外部调用和内部调用
下一条: CSS样式设计实现段落首行缩进