Your Ad Here

advanced code snippet search

Posted By

sebikovacs on 09/12/10


Tagged

forms


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

DCalabrese


Styles for form elements

 / Published in: CSS
 
Expand | Embed | Plain Text 
  1. /*online form with span*/
  2. .onlineForm label {width: 240px;margin: 0 20px 0 0;}
  3. .onlineForm .text {width: 240px;height: 25px;margin: 0 20px 10px 0;}
  4. .onlineForm .text input {width:225px;}
  5. .onlineForm .textarea {width: 500px;height: 115px;}
  6. .onlineForm .textarea textarea {width:487px;}
  7.  
  8. /*online form with no spans*/
  9. .onlineForm label {width: 240px;margin: 0 20px 0 0;}
  10. .onlineForm input {width: 240px;height: 25px;margin: 0 20px 10px 0;}
  11. .onlineForm textarea {width: 500px;height: 115px;}
  12. .onlineForm .submit{margin:0;padding:0;}
  13.  
  14. /*checkbox*/
  15. .checkbox{}
  16. .checkbox label{}
  17. .checkbox input{}
  18. .submit{margin:0;padding:0;}
  19.  
  20. /*fancy select*/
  21. .select{position:relative;}
  22. .select span{width:287px;height:39px;display:block;line-height:39px;padding:0 20px 0 10px;overflow:hidden;cursor:default;}
  23. .select ul {position:absolute;left:0;border-left:1px solid #C2C9D5;border-right:1px solid #C2C9D5;border-bottom:1px solid #C2C9D5;background:#FFFFFF;top:39px;left:2px;width:98%;display:none;height:291px;overflow-x:hidden;overflow-y:scroll;}
  24. .select ul li{border-bottom:1px solid #C2C9D5;width:100%;}
  25. .select ul a{width:100%;float:left;padding:9px 0 9px 20px;width:94%;}
  26. .select ul a:hover{background:#E9EFFB;}

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: wortell on September 21, 2010

as with too many of the snipplr.com snippets... items like this would be great - if there were a quick-n-diry (example) link...

cool, neat, tidy, and very clean/slick css indeedy, but an example would save 4 min. of work... of copy/paste, modify code (ie. inserting .onlineForm class into form elements), view... (vs. the obvious - click link to maybe a standard 'form/html elements' page...)

You need to login to post a comment.