Rounded corners Style with Arrow (TWINKIE)


/ Published in: CSS
Save to your folder(s)



Copy this code and paste it in your HTML
  1. /* Twinkie input`s */
  2. #offerTable .Qinput input { display: inline-block; height: 30px; line-height: 25px; font-size: 14px; background: #ffff99 url({fileURL}images/big-empty.png) 100% 50% no-repeat; border: 2px solid #C0C0C0; padding: 0px 30px 0px 5px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
  3. #offerTable .Qinput select { display: inline-block; font-size: 14px; background: #ffff99; border: 2px solid #C0C0C0; padding: 5px 2px 5px 2px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
  4. #offerTable .Qinput input,
  5. #offerTable .Qinput select{
  6. margin: 2px 0;
  7. width: 259px;
  8. }
  9. #offerTable .Qinput option {background: #ffff99;}
  10. #offerTable .Qinput select {
  11. width: 297px;
  12. }
  13. #offerTable .Qinput div select {
  14. width: 93px;
  15. }
  16.  
  17.  
  18. function setTwinkieInputsWidth() {
  19. var table = document.getElementById('offerTable');
  20. var input = table.getElementsByTagName('input');
  21. var select = table.getElementsByTagName('select');
  22.  
  23. for(var i=0; i<select.length; i++ ) {
  24. if(select[i].parentNode.nodeName == 'DIV') {
  25. select[i].style.width = (input[0].offsetWidth-18) / 3;
  26. } else {
  27. select[i].style.width = input[0].offsetWidth;
  28. }
  29. }
  30. }
  31.  
  32.  
  33. if(!document.doctype) {setTwinkieInputsWidth()};

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.