Created
March 27, 2012 10:43
-
-
Save YoSmudge/2214759 to your computer and use it in GitHub Desktop.
Pure HTML/CSS Dropdown Select Menu
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*Add cursor to the spans and labels*/ | |
| form .mycssdropdown li label, form .mycssdropdown li label span{ | |
| cursor:pointer; | |
| } | |
| /*By default, hide the spans*/ | |
| form .mycssdropdown li label span{ | |
| display:none; | |
| } | |
| /*All the spans should show when hovered*/ | |
| form .mycssdropdown:hover li label span{ | |
| display:block; | |
| } | |
| /*Otherwise, only the selected span should display*/ | |
| form .mycssdropdown li label input:checked+span{ | |
| display:block; | |
| font-weight:bold; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <link type="text/css" rel="stylesheet" href="./style.css" /> | |
| <link type="text/css" rel="stylesheet" href="./dropdown.css" /> | |
| <title>Pure HTML/CSS Dropdown Select Menu</title> | |
| <p>Example of a pure CSS dropdown list using HTML radio buttons for use in a form | |
| <p>Haven't tested browser compabability so YMMV | |
| <p>P.S. this is all wonderful valid HTML5 and CSS3 (which is nice) | |
| <form action="./test.php" method="post"> | |
| <ul class="mycssdropdown"> | |
| <li> | |
| <label> | |
| <input type="radio" name="avalue" value="option a" checked="checked" /> | |
| <span>Option A</span> | |
| </label> | |
| <li> | |
| <label> | |
| <input type="radio" name="avalue" value="option b" /> | |
| <span>Option B</span> | |
| </label> | |
| </ul> | |
| <br/> | |
| <input type="submit" /> | |
| </form> | |
| <p>To read more see <a href="http://rmg.io/wordpress/?p=4">the blog post</a> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Make it pretty with Bootstrap | |
| */ | |
| /*As before, hide the radio buttons and style the ul*/ | |
| form .mycssdropdown li label input{ | |
| display:none; | |
| width:0; | |
| height:0; | |
| margin:0; | |
| padding:0; | |
| position:absolute; | |
| } | |
| form .mycssdropdown{ | |
| list-style-type:none; | |
| margin:0; | |
| } | |
| form .mycssdropdown li label span{ | |
| color:#FFFFFF; | |
| cursor:pointer; | |
| } | |
| /*When the dropdown isn't showing, display the elements inline and show the caret*/ | |
| form .mycssdropdown li, form .mycssdropdown li label{ | |
| display:inline; | |
| } | |
| /*When it is showing, hide the caret and display as block*/ | |
| form .mycssdropdown:hover li{ | |
| display:block; | |
| } | |
| form .mycssdropdown:hover li span.caret{ | |
| display:none; | |
| } | |
| /*Now hide all the elements except checked*/ | |
| form .mycssdropdown li label span{ | |
| display:none; | |
| } | |
| form .mycssdropdown li label input:checked+span{ | |
| display:inline; | |
| } | |
| /*But show them on hover*/ | |
| form .mycssdropdown:hover li label span{ | |
| display:inline; | |
| } | |
| /*And highlight the selected one*/ | |
| form .mycssdropdown:hover li label input:checked+span{ | |
| font-weight:bold; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <link type="text/css" rel="stylesheet" href="./pretty.css" /> | |
| <link type="text/css" rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" /> | |
| <title>Pure HTML/CSS Dropdown Select Menu</title> | |
| <div class="container"> | |
| <p>Pretty example using Bootstrap | |
| <form action="./test.php" method="post"> | |
| <ul class="btn btn-primary mycssdropdown"> | |
| <li> | |
| <label> | |
| <input type="radio" name="avalue" value="option a" checked="checked" /> | |
| <span>Option A</span> | |
| </label> | |
| <li> | |
| <label> | |
| <input type="radio" name="avalue" value="option b" /> | |
| <span>Option B</span> | |
| </label> | |
| <li> | |
| <span class="caret"></span> | |
| </ul> | |
| <br/> | |
| <input type="submit" /> | |
| </form> | |
| <p>To read more see <a href="http://rmg.io/wordpress/?p=4">the blog post</a> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| CSS for dropdown | |
| */ | |
| /*First, do some styling on the UL*/ | |
| form .mycssdropdown{ | |
| background-color:#DDD; | |
| border:solid 1px #000; | |
| border-radius:10px; | |
| display:inline-block; | |
| list-style-type:none; | |
| margin:0; | |
| padding:5px; | |
| } | |
| /*Now we need to remove the actual radio buttons, the label will serve as the click area*/ | |
| form .mycssdropdown li label input{ | |
| display:none; | |
| width:0; | |
| height:0; | |
| margin:0; | |
| padding:0; | |
| position:absolute; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| $Value = htmlentities($_POST['avalue']); | |
| echo "You selected {$Value}!"; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks. That exactly what I needed. Github is using the same Idea for the watch repo list.