SHARE
TWEET

Untitled

a guest Oct 21st, 2019 77 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
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top