CSS   105
colorpicker css
Guest on 17th March 2023 12:26:00 AM


  1. .colorpicker {
  2.     width: 356px;
  3.     height: 176px;
  4.     overflow: hidden;
  5.     position: absolute;
  6.     background: url(../images/color_picker/colorpicker_background.png);
  7.     font-family: Arial, Helvetica, sans-serif;
  8.     display: none;
  9.     z-index: 1000;
  10. }
  11. .colorpicker_color {
  12.     width: 150px;
  13.     height: 150px;
  14.     left: 14px;
  15.     top: 13px;
  16.     position: absolute;
  17.     background: #f00;
  18.     overflow: hidden;
  19.     cursor: crosshair;
  20. }
  21. .colorpicker_color div {
  22.     position: absolute;
  23.     top: 0;
  24.     left: 0;
  25.     width: 150px;
  26.     height: 150px;
  27.     background: url(../images/color_picker/colorpicker_overlay.png);
  28. }
  29. .colorpicker_color div div {
  30.     position: absolute;
  31.     top: 0;
  32.     left: 0;
  33.     width: 11px;
  34.     height: 11px;
  35.     overflow: hidden;
  36.     background: url(../images/color_picker/colorpicker_select.gif);
  37.     margin: -5px 0 0 -5px;
  38. }
  39. .colorpicker_hue {
  40.     position: absolute;
  41.     top: 13px;
  42.     left: 171px;
  43.     width: 35px;
  44.     height: 150px;
  45.     cursor: n-resize;
  46. }
  47. .colorpicker_hue div {
  48.     position: absolute;
  49.     width: 35px;
  50.     height: 9px;
  51.     overflow: hidden;
  52.     background: url(../images/color_picker/colorpicker_indic.gif) left top;
  53.     margin: -4px 0 0 0;
  54.     left: 0px;
  55. }
  56. .colorpicker_new_color {
  57.     position: absolute;
  58.     width: 60px;
  59.     height: 30px;
  60.     left: 213px;
  61.     top: 13px;
  62.     background: #f00;
  63. }
  64. .colorpicker_current_color {
  65.     position: absolute;
  66.     width: 60px;
  67.     height: 30px;
  68.     left: 283px;
  69.     top: 13px;
  70.     background: #f00;
  71. }
  72. .colorpicker input {
  73.     background-color: transparent;
  74.     border: 1px solid transparent;
  75.     position: absolute;
  76.     font-size: 10px;
  77.     font-family: Arial, Helvetica, sans-serif;
  78.     color: #898989;
  79.     top: 4px;
  80.     right: 11px;
  81.     text-align: right;
  82.     margin: 0;
  83.     padding: 0;
  84.     height: 11px;
  85. }
  86. .colorpicker_hex {
  87.     position: absolute;
  88.     width: 72px;
  89.     height: 22px;
  90.     background: url(../images/color_picker/colorpicker_hex.png) top;
  91.     left: 212px;
  92.     top: 142px;
  93. }
  94. .colorpicker_hex input {
  95.     right: 6px;
  96. }
  97. .colorpicker_field {
  98.     height: 22px;
  99.     width: 62px;
  100.     background-position: top;
  101.     position: absolute;
  102. }
  103. .colorpicker_field span {
  104.     position: absolute;
  105.     width: 12px;
  106.     height: 22px;
  107.     overflow: hidden;
  108.     top: 0;
  109.     right: 0;
  110.     cursor: n-resize;
  111. }
  112. .colorpicker_rgb_r {
  113.     background-image: url(../images/color_picker/colorpicker_rgb_r.png);
  114.     top: 52px;
  115.     left: 212px;
  116. }
  117. .colorpicker_rgb_g {
  118.     background-image: url(../images/color_picker/colorpicker_rgb_g.png);
  119.     top: 82px;
  120.     left: 212px;
  121. }
  122. .colorpicker_rgb_b {
  123.     background-image: url(../images/color_picker/colorpicker_rgb_b.png);
  124.     top: 112px;
  125.     left: 212px;
  126. }
  127. .colorpicker_hsb_h {
  128.     background-image: url(../images/color_picker/colorpicker_hsb_h.png);
  129.     top: 52px;
  130.     left: 282px;
  131. }
  132. .colorpicker_hsb_s {
  133.     background-image: url(../images/color_picker/colorpicker_hsb_s.png);
  134.     top: 82px;
  135.     left: 282px;
  136. }
  137. .colorpicker_hsb_b {
  138.     background-image: url(../images/color_picker/colorpicker_hsb_b.png);
  139.     top: 112px;
  140.     left: 282px;
  141. }
  142. .colorpicker_submit {
  143.     position: absolute;
  144.     width: 22px;
  145.     height: 22px;
  146.     background: url(../images/color_picker/colorpicker_submit.png) top;
  147.     left: 322px;
  148.     top: 142px;
  149.     overflow: hidden;
  150. }
  151. .colorpicker_focus {
  152.     background-position: center;
  153. }
  154. .colorpicker_hex.colorpicker_focus {
  155.     background-position: bottom;
  156. }
  157. .colorpicker_submit.colorpicker_focus {
  158.     background-position: bottom;
  159. }
  160. .colorpicker_slider {
  161.     background-position: bottom;
  162. }
Raw Paste

Login or Register to edit or fork this paste. It's free.