.dropdown{ position: relative; background-color: #dedede; background: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(222,222,222)),color-stop(1, rgb(255,255,255))); background: -moz-linear-gradient(center bottom,rgb(222,222,222) 0%,rgb(255,255,255) 100%); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0px 1px 1px #9fa0a3; -moz-box-shadow: 0px 1px 1px #9fa0a3; box-shadow: 0px 1px 1px #9fa0a3; border-top: 1px solid #dddddd; border-bottom: 1px solid #fafafa; border-left: 1px solid #fafafa; border-right: 1px solid #fafafa; height: 15px; margin: 0; padding : 2px 21px 2px 0; color: #333; font-family : Tahoma, Arial; font-size : 11px; } .dropdownError { } .dropdownDisabled { color: #bebebe; } .dropdownOver { } .dropdownDown { position: relative; } .dropdown .dropdownArrow { background: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(222,222,222)),color-stop(1, rgb(255,255,255))); background: -moz-linear-gradient(center bottom,rgb(222,222,222) 0%,rgb(255,255,255) 100%); height:15px; margin: 2px 0 4px; position:absolute; right:0; top:0; width:18px; -webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 2px; -moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; } .dropdown .dropdownArrow span { background: url("@{image-path}/ddarrow.png") no-repeat center center; display:block; height:15px; position:absolute; width:18px; } .dropdown .dropdownArrow div { border-left:1px solid #B9B9B9; height:13px; width: 1px; background-color: #fff; padding-bottom:2px; } .dropdown .dropdownlabel{ padding: 1px 1px 1px 5px; cursor : default; height: 13px; margin : 0 0 0 2px; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; } .dropdownFocus .dropdownlabel { border: 1px dotted #B8B8B8; padding: 0 0 0 4px; } .dropdownError .dropdownArrow { } .dropdownInitial .dropdownArrow { } .dropdownFocus .dropdownArrow { background: none; } .dropdownOver .dropdownArrow { background: -webkit-gradient(linear,left bottom,left top,color-stop(0.48, rgb(207,207,207)),color-stop(0.53, rgb(230,230,230)),color-stop(1, rgb(255,255,255))); background: -moz-linear-gradient(center bottom,rgb(207,207,207) 48%,rgb(230,230,230) 53%,rgb(255,255,255) 100%); } .dropdownDown .dropdownArrow { background: -webkit-gradient(linear,left bottom,left top,color-stop(0.48, rgb(255,255,255)),color-stop(0.53, rgb(230,230,230)),color-stop(1, rgb(207,207,207))); background: -moz-linear-gradient(center bottom,rgb(255,255,255) 48%,rgb(230,230,230) 53%,rgb(207,207,207) 100%); } .optionList{ position: absolute; top: 0; left: 0; width: 120px; margin-top : 2px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 2px 8px #8A8A8A; -moz-box-shadow: 0 2px 8px #8A8A8A; box-shadow: 0 2px 8px #8A8A8A; background: #ffffff; z-index: 1000; color: #333333; font-family : Tahoma, Arial; font-size : 11px; display : none; overflow : auto; } .optionList .dditem { display: block; height: 16px; padding: 2px 3px 2px 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-color: white; color: #333333; position: relative; cursor: default; } .optionList .dditem:first-child{ -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; } .optionList .dditem:last-child{ -webkit-border-bottom-right-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } .optionList .dditem.hover { background: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(51,124,188)),color-stop(1, rgb(64,145,216))); background: -moz-linear-gradient(center bottom,rgb(51,124,188) 0%,rgb(64,145,216) 100%); color : white; } .optionList .selected span{ background: url("@{image-path}/dot_blue.png") no-repeat 0 0; height: 8px; left: 5px; position:absolute; top: 6px; width: 9px; } .optionList .selected.hover span{ background-position: 0 -8px; }