Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <style>
- /*the container must be positioned relative:*/
- .custom-select {
- position: relative;
- font-family: Arial;
- }
- .custom-select select {
- display: none; /*hide original SELECT element:*/
- }
- .select-selected {
- background-color: DodgerBlue;
- }
- /*style the arrow inside the select element:*/
- .select-selected:after {
- position: absolute;
- content: "";
- top: 14px;
- right: 10px;
- width: 0;
- height: 0;
- border: 6px solid transparent;
- border-color: #fff transparent transparent transparent;
- }
- /*point the arrow upwards when the select box is open (active):*/
- .select-selected.select-arrow-active:after {
- border-color: transparent transparent #fff transparent;
- top: 7px;
- }
- /*style the items (options), including the selected item:*/
- .select-items div,.select-selected {
- color: #ffffff;
- padding: 8px 12px;
- border: 1px solid transparent;
- border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
- cursor: pointer;
- user-select: none;
- }
- /*style items (options):*/
- .select-items {
- position: absolute;
- background-color: DodgerBlue;
- top: 100%;
- left: 0;
- right: 0;
- z-index: 99;
- }
- /*hide the items when the select box is closed:*/
- .select-hide {
- display: none;
- }
- .select-items div:hover, .same-as-selected {
- background-color: rgba(0, 0, 0, 0.1);
- }
- </style>
- </head>
- <body>
- <h2>How much gayness can one human contain?</h2>
- <!--surround the select box with a "custom-select" DIV element. Remember to set the width:-->
- <div class="custom-select" style="width:220px;">
- <select>
- <option value="0">Select Gayness:</option>
- <option value="1">Not at all Ga</option>
- <option value="2">Almost not Ga</option>
- <option value="3">A little Ga</option>
- <option value="4">Somewhat Gay</option>
- <option value="5">Gay</option>
- <option value="6">A GAY</option>
- <option value="7">Mega Gay</option>
- <option value="8">Super Gay</option>
- <option value="9">A MAJOR GAY</option>
- <option value="10">Gayer then JB</option>
- <option value="11">Pirates</option>
- </select>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement