Guest User

Untitled

a guest
Oct 21st, 2019
84
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2. <head>
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4. <style>
  5. /*the container must be positioned relative:*/
  6. .custom-select {
  7. position: relative;
  8. font-family: Arial;
  9. }
  10.  
  11. .custom-select select {
  12. display: none; /*hide original SELECT element:*/
  13. }
  14.  
  15. .select-selected {
  16. background-color: DodgerBlue;
  17. }
  18.  
  19. /*style the arrow inside the select element:*/
  20. .select-selected:after {
  21. position: absolute;
  22. content: "";
  23. top: 14px;
  24. right: 10px;
  25. width: 0;
  26. height: 0;
  27. border: 6px solid transparent;
  28. border-color: #fff transparent transparent transparent;
  29. }
  30.  
  31. /*point the arrow upwards when the select box is open (active):*/
  32. .select-selected.select-arrow-active:after {
  33. border-color: transparent transparent #fff transparent;
  34. top: 7px;
  35. }
  36.  
  37. /*style the items (options), including the selected item:*/
  38. .select-items div,.select-selected {
  39. color: #ffffff;
  40. padding: 8px 12px;
  41. border: 1px solid transparent;
  42. border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  43. cursor: pointer;
  44. user-select: none;
  45. }
  46.  
  47. /*style items (options):*/
  48. .select-items {
  49. position: absolute;
  50. background-color: DodgerBlue;
  51. top: 100%;
  52. left: 0;
  53. right: 0;
  54. z-index: 99;
  55. }
  56.  
  57. /*hide the items when the select box is closed:*/
  58. .select-hide {
  59. display: none;
  60. }
  61.  
  62. .select-items div:hover, .same-as-selected {
  63. background-color: rgba(0, 0, 0, 0.1);
  64. }
  65. </style>
  66. </head>
  67.  
  68. <body>
  69.  
  70. <h2>How much gayness can one human contain?</h2>
  71.  
  72. <!--surround the select box with a "custom-select" DIV element. Remember to set the width:-->
  73. <div class="custom-select" style="width:220px;">
  74. <select>
  75. <option value="0">Select Gayness:</option>
  76. <option value="1">Not at all Ga</option>
  77. <option value="2">Almost not Ga</option>
  78. <option value="3">A little Ga</option>
  79. <option value="4">Somewhat Gay</option>
  80. <option value="5">Gay</option>
  81. <option value="6">A GAY</option>
  82. <option value="7">Mega Gay</option>
  83. <option value="8">Super Gay</option>
  84. <option value="9">A MAJOR GAY</option>
  85. <option value="10">Gayer then JB</option>
  86. <option value="11">Pirates</option>
  87. </select>
  88. </div>
RAW Paste Data