Advanced Search

Rounded corners Style with Arrow (TWINKIE)

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

Expand | Embed | Plain Text

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.