/* This stylesheet belongs to TextboxList - Copyright Guillermo Rauch 2009 TextboxList is not priceless for commercial use. See Purchase to remove copyright */ .textboxlist { cursor: text; display: inline-block; width: 760px !important; color: #333; font-size:0.9em; } .textboxlist * { box-sizing: content-box;} .textboxlist-bits { zoom: 1; overflow: hidden; margin: 0; padding: 7px 5px 0 5px !important; border: 2px solid #E1E1E1; border-radius: 3px; } .textboxlist-focus ul.textboxlist-bits {border: 2px solid #a5bffc;} .textboxlist-bit { list-style-type: none; float: left; display: block; margin: 0 5px 3px 0; padding-top:0.2em !important; cursor: default; height: 20px; } .textboxlist-bit-editable { border: 1px solid #fff; } .textboxlist-bit-editable-input { border: 0; margin:2px; padding: 0; height: 18px; } .textboxlist-bit-editable-input:focus { outline: 0; } .textboxlist-bit-box { position: relative; line-height: 18px; padding: 0 7px; cursor: default; /** background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) ); background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf'); */ background-color:#ededed; border-top-left-radius:3px; border-top-right-radius:3px; border-bottom-right-radius:3px; border-bottom-left-radius:3px; /**border:1px solid #dcdcdc; text-shadow:1px 1px 0px #ffffff;*/ } .textboxlist-bit-box-deletable { padding-right: 15px; } .textboxlist-bit-box-deletebutton { position: absolute; right: 4px; top: 9px; display: block; width: 7px; height: 7px; font-size: 1px; background: url('../images/close.gif'); } .textboxlist-bit-box-deletebutton:hover { border: none; background-position: 7px; text-decoration: none; } .textboxlist-bit-box-hover, .textboxlist-bit-box-focus { /** background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed'); */ background-color:#dfdfdf; } .textboxlist-bit-box-focus .textboxlist-bit-box-deletebutton { background-position: bottom; } /* TextboxList Style guidelines This style doesn't necessarily have to be in a separate file. It's advisable not to set widths and margins from here, but instead apply it to a particular object or class (#id .textboxlist { width: xxx } or .class .textboxlist { width: xxx }) The padding-top + padding-left + height of ".textboxlist-bit-editable-input {}" has to match the line-height of ".textboxlist-bit-box {}" for UI consistency. The font configuration has to be present in .textboxlist and .textboxlist-bit-editable-input (for IE reasons) The *padding-bottom (notice the *) property of .textboxlist-bits {} has to be equal to the margin-bottom of .textboxlist-bit {} for IE reasons. The padding-top of .textboxlist ul {} has to match the margin-bottom of .textboxlist-bit, and the padding-bottom has to be null. Make sure the border-width of the .textboxlist-bit-editable {} is equal to the border-width of the box (a border that matches the background is advisable for the input) Feel free to edit the borders, fonts, backgrounds and radius. */