首页/CSS代码外包/css样式控制区分input是按钮还是文本框的方法大全

css样式控制区分input是按钮还是文本框的方法大全

发布-xiaoming | 浏览量-

对设置样式时怎么区分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选择器
实现参考代码:

折叠XML/HTML Code复制内容到剪贴板
  1. <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" >  
  3. <head>  
  4. <title> diffInput2 </title>  
  5. <meta name="Author" content="JustinYoung"/>  
  6. <meta name="Keywords" content=""/>  
  7. <meta name="Description" content=""/>  
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  9. <style type="text/css">  
  10. input[type="text"]   
  11. {   
  12. background-color:#FFC;   
  13. }   
  14. input[type="password"]   
  15. {   
  16. background-image:url(BG.gif);   
  17. }   
  18. input[type="submit"]   
  19. {   
  20. background-color:blue;   
  21. color:white;   
  22. }   
  23. input[type="reset"]   
  24. {   
  25. background-color:navy;   
  26. color:white;   
  27. }   
  28. input[type="radio"]   
  29. {   
  30. /*In FF,Some radio style like background-color not been supported*/   
  31. margin:10px;   
  32. }   
  33. input[type="checkbox"]   
  34. {   
  35. /*In FF,Some checkbox style like background-color not been supported*/   
  36. margin:10px;   
  37. }   
  38. input[type="button"]   
  39. {   
  40. background-color:lightblue;   
  41. }   
  42. </style>  
  43. </head>  
  44. <body>  
  45. <dl>  
  46. <dt>This is normal textbox:<dd><input type="text" name="">  
  47. <dt>This is password textbox:<dd><input type="password" name="">  
  48. <dt>This is submit button:<dd><input type="submit">  
  49. <dt>This is reset button:<dd><input type="reset">  
  50. <dt>This is radio:<dd><input type="radio" name="ground1"> <input type="radio" name="ground1">  
  51. <dt>This is checkbox:<dd><input type="checkbox" name="ground2"> <input type="checkbox" name="ground2">  
  52. <dt>This is normal button:<dd><input type="button" value="i'm button">  
  53. </dl>  
  54. </body>  
  55. </html>  

 

原文地址:http://www.35ui.cn/post/20100608718.html

标签html网页培训班Dreamweaver网页制作ps网页切图ps切图css网页培训班jQuery教程网站栏目策划方案做网站个人

上一条: CSS样式表的外部调用和内部调用
下一条: CSS样式设计实现段落首行缩进

或许你还对下面的文章感兴趣