lib/dijit/themes/claro/form/Select.css

   1 /* Select
   2  *
   3  * Styling Select mainly includes:
   4  *
   5  * 1. Containers
   6  *              .dijitSelect - for border, background-color
   7  *              .dijitButtonContents - for border
   8  *
   9  * 2. Arrow
  10  *              .dijitArrowButton - for border, padding and background-color|image
  11  *              .dijitArrowButtonInner - for border, background-color|image, display and width|height
  12  *
  13  * 3. Menu
  14  *              .dijitSelectMenu .* - for border, padding
  15  *
  16  * 4. Various states
  17  *              .dijitSelectHover|.dijitSelectFocused|.dijitSelectDisabled .* - for border, padding and background-color|image
  18  */
  19 .claro .dijitSelect .dijitButtonText {
  20   padding: 2px;
  21 }
  22 /* normal status */
  23 .claro .dijitSelect {
  24   border: 1px solid #b5bcc7;
  25   background-color: #ffffff;
  26   border-collapse: separate;
  27 }
  28 .dj_ie6 .claro .dijitSelect, .dj_ie6 .claro .dijitSelect .dijitButtonNode {
  29   background-image: none;
  30 }
  31 .claro .dijitSelect .dijitButtonContents {
  32   border: 0 solid #b5bcc7;
  33   border-right-width: 1px;
  34 }
  35 .claro .dijitSelect .dijitArrowButton {
  36   padding: 0;
  37   border: 1px solid #ffffff;
  38   border-top: none;
  39   background-color: #efefef;
  40   background-image: url("../form/images/formHighlight.png");
  41   background-repeat: repeat-x;
  42 }
  43 .claro .dijitSelect .dijitArrowButton .dijitArrowButtonInner {
  44   background-image: url("../form/images/commonFormArrows.png");
  45   background-position: -35px 70%;
  46   background-repeat: no-repeat;
  47   width: 16px;
  48   height: 16px;
  49 }
  50 /* hover status */
  51 .claro .dijitSelectHover {
  52   border: 1px solid #759dc0;
  53   background-color: #e5f2fe;
  54   background-image: url("../form/images/textBox_back.png");
  55   background-repeat: repeat-x;
  56 }
  57 .claro .dijitSelectHover .dijitButtonContents {
  58   border-color: #759dc0;
  59 }
  60 .claro .dijitSelectHover .dijitArrowButton {
  61   background-color: #abd6ff;
  62 }
  63 .claro .dijitSelectHover .dijitArrowButton .dijitArrowButtonInner {
  64   background-position: -70px 70%;
  65 }
  66 /* focused status */
  67 .claro .dijitSelectFocused {
  68   border: 1px solid #759dc0;
  69 }
  70 .claro .dijitSelectFocused .dijitButtonContents {
  71   border-color: #759dc0;
  72 }
  73 .claro .dijitSelectFocused .dijitArrowButton {
  74   background-color: #7dbefa;
  75   background-position: 0 -177px;
  76   border: none;
  77   padding: 0 1px;
  78 }
  79 .claro .dijitSelectFocused .dijitArrowButton .dijitArrowButtonInner {
  80   background-position: -70px 70%;
  81   margin-bottom: 1px;
  82 }
  83 /* disable status */
  84 .claro .dijitSelectDisabled {
  85   border: 1px solid #d3d3d3;
  86   background-color: #efefef;
  87   background-image: none;
  88   color: #818181;
  89 }
  90 .claro .dijitSelectDisabled .dijitArrowButton {
  91   background-color: #efefef;
  92 }
  93 .claro .dijitSelectDisabled .dijitArrowButton .dijitArrowButtonInner {
  94   background-position: 0 70%;
  95 }
  96 /* Dropdown menu style for select */
  97 .claro .dijitSelectMenu td.dijitMenuItemIconCell, .claro .dijitSelectMenu td.dijitMenuArrowCell {
  98   /* so that arrow and icon cells from MenuItem are not displayed */
  99
 100   display: none;
 101 }
 102 .claro .dijitSelectMenu td.dijitMenuItemLabel {
 103   /* line up menu text with text in select box (in LTR and RTL modes) */
 104
 105   padding: 2px;
 106 }
 107 .claro .dijitSelectMenu .dijitMenuSeparatorTop {
 108   border-bottom: 1px solid #759dc0;
 109 }