PROWAREtech
CSS: Custom Dropdown Lists
Stylish dropdown lists using only HTML and CSS.
See also Customizing SELECT/OPTION Elements.
Create a dropdown listbox just like the ones pictured here. The checkboxes function purely as a state holders, and this is why their names are not important.
Create a base64 string of your images to use on these dropdown lists.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML and CSS Dropdown Lists/Listbox</title>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: sans-serif;
background-color: #ddd;
}
.wrapper {
display: flex;
flex-wrap: wrap;
}
.dropdown-wrapper {
position: relative;
width: 175px;
background-color: #fff;
margin: 10px;
}
.dropdown-wrapper .dropdown-ul {
position: absolute;
margin: 0;
padding: 0;
list-style: none;
visibility: hidden;
opacity: 0;
transition: .3s;
width: 100%;
}
.dropdown-wrapper .dropdown-ul li {
border-left: 5px solid;
padding: 10px;
background-color: #fff;
}
.dropdown-wrapper .dropdown-ul a {
display: block;
text-decoration: none;
color: #333;
}
.dropdown-wrapper .dropdown-label {
position: relative;
display: block;
border-left: 5px solid brown;
padding: 10px;
width: 100%;
color: #999;
}
.dropdown-wrapper .dropdown-label::after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 16px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #999 transparent;
}
.dropdown-wrapper .dropdown-ul li:nth-child(odd) {
border-left-color: limegreen;
}
.dropdown-wrapper .dropdown-ul li:nth-child(even) {
border-left-color: green;
}
.dropdown-wrapper .dropdown-chk:checked ~ .dropdown-ul {
visibility: visible;
opacity: 1;
}
.dropdown-wrapper .dropdown-chk:checked ~ .dropdown-label::after {
border-width: 0 6px 6px 6px;
}
.dropdown-wrapper .sign-in li:nth-child(1) {
border-left-color: orange;
}
.dropdown-wrapper .sign-in li:nth-child(2) {
border-left-color: dodgerblue;
}
.dropdown-wrapper .sign-in li:nth-child(3) {
border-left-color: navy;
}
/*
CONVERT IMAGES TO BASE64 STRINGS:
http://www.prowaretech.com/articles/current/tools/convert-image-to-base64
*/
.google::before {
content: url(data:image/gif;base64,R0lGODlhEgASAOYAAFqU9USvYf3t7M/g/Pb5/uz37/GBePzNR2e+fu1eUpK5+YrNnPzh3/B1a+xVSOxSRexYS2S9fPOTi/SZkf7wyO9rR2G7efvCLe1hVdbt3O9vZXHChj6sWuLz5/HBH2SoyGq/gcno0fvCH+xNOf7xzFe1avvc2TepVtnu3/zJNPzDH/KHfvjEwLLN+v/8/EOuYfq6Rmy1qFG0a2Oa9v7z8n3IkYDJlE2zafz+/LLevvnQzPe4s+9sYfjHw/3Zb/3Ya3uu5leS9bvEVfB7cdzw4f3w7/vDH9/CLrnhxJS6+UewY/zIMF26drPO+6HC+vu8BTSoU+pDNUKF9P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAASABIAAAe1gFOCgiYSPA8PQxM6g41TAg1RkpOSK0WODBCUm1EajTSakwkGBgmSGAKNBpMOLI09DamDJDAjUQ4MjrpTPk8XFTu7uilPTyIujU7Ky8oDRsUHjlLT1NNJKtDS1dQKS8UeOI0A4wBB1C0/T0clOcJN1AMUQhxQNwW6BDPUBFMbUP8yQjTqAISboAIB/v1jUsMGghMvPkgBwE9QBiUKMyqMMcBRARAaFUYgIgzFAgsBAiBYgMRRIAA7);
}
.twitter::before {
content: url(data:image/gif;base64,R0lGODlhEgASAOYAAGO68mq98mG58l648WS78me88l238Wa78l+48mK68mC58tLr+9bt+1248W2/8/7+/9/x/Ov2/Vy38XXC84fK9dzv/On1/Vm18bjf+dXs+2S68s/q+s7p+3zF9OPz/YbJ9O/4/rrg+f7//+33/dPs++74/vv9/o/N9aTX97zi+W6/84PI9Pj8/vj7/uHy/O33/rff+Wm88svo+1u38ZHO9uLz/MPl+pLP9cvo+q7b+KbX95bQ9s/p+1+48Vq28YbK9Wy+8sTl+dju+2K58sbl+vf7/vr9/q3b+HLA8/n8/l+58nbC82G58Z3T99ru/Lbf+f3+//v9/3/G9Or1/ez2/Wi88nTC8+b0/fr9/5vS9pzT9nDA88Pk+WC48WW78v///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAASABIAAAfFgF+Cg4SFhodfJRVUgg8jWAyHIjkBAgFNISsbFgcYhikXQwQADRcUQTUCEicegyxWCl6ysgUYLUsIBgU7MhYuBQCzXgZHgjxMow0DARMHwl4SNl84XDexsgACz149JF9TMQLO27MJQCCCTg4I5LMDFIJJFRk/Ce1eM0SCUCgAKhrtDHwwMciIDiQOyHUJcMVQBC0JCAgbUIADoQVPskwQINELAAQ+OkAolIHGlioalAxQEEAKjCKIoryAwGCBkAgPEOnUGQgAOw==);
}
.facebook::before {
content: url(data:image/gif;base64,R0lGODlhEgASAOYAAC9Mmi5LmX+RwERepJGgyVVsrDhTnjJOmzZSnTBNmkpjpzlUn/v8/Wp/t87V5zZRnTdTnjRQnDFOm0tkqHOGuitImHWHu8zT5oiZxHSHu5mnzfv7/aCt0Ort9ShGluXp8nmLvipHl46eyFJpqm+DuT1YoD5ZoU5mqTdSnnuOvvj5+01lqHyPv42dxzlUnvn6/NXb6s/V6L/I4Pj5/DFNmzxXoDVRnKSw0tfd7ClHlztVn1Nqq+Hl8I6dx0tjp3mMviJBk5CgyHWIu0hhpv///zpVnwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAASABIAAAergAVDg4SFhkMFA0WLjI0INAkJBkUDQ42XCQokQhZDEIOXjAcgHUSmDRKgoREjL6anqZahAD+mMBkUnqqNCwECpi1AAAY6u4woFSymIiEIi8ZFETcxPKYfDg47NtAHF6+vDD4P3DIqG6YMMzg1BtAuKxNBphwKJwtF0EUIOSmmPR4Pnsm6BOAXEQIBGOUrUtAUQoUDGzU8mPCZolkGHy4aIOiQCQymNJQgVCAQADs=);
}
</style>
</head>
<body>
<main>
<div class="wrapper">
<div class="dropdown-wrapper">
<input type="checkbox" style="display:none;" class="dropdown-chk" id="check1" />
<label for="check1" class="dropdown-label">Choose sign in</label>
<ul class="dropdown-ul sign-in">
<li><a class="google" href="#"> Google</a></li>
<li><a class="twitter" href="#"> Twitter</a></li>
<li><a class="facebook" href="#"> Facebook</a></li>
</ul>
</div>
<div class="dropdown-wrapper">
<input type="checkbox" style="display:none;" class="dropdown-chk" id="check2" />
<label for="check2" class="dropdown-label">John Smith</label>
<ul class="dropdown-ul">
<li><a href="#">Profile</a></li>
<li><a href="#">Preferences</a></li>
<li><a href="#">Sign out</a></li>
</ul>
</div>
<div class="dropdown-wrapper">
<input type="checkbox" style="display:none;" class="dropdown-chk" id="check3" />
<label for="check3" class="dropdown-label">Ship By</label>
<ul class="dropdown-ul">
<li><a href="#">USPS</a></li>
<li><a href="#">UPS</a></li>
<li><a href="#">FedEx</a></li>
<li><a href="#">DHS</a></li>
</ul>
</div>
</div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur tenetur blanditiis minus quae, assumenda fugit dolorum veniam deserunt consectetur vel dolor quod nisi minima corporis dignissimos voluptatum pariatur, qui ab delectus quam esse! Ducimus porro, facere natus repellendus quasi dolor assumenda inventore accusamus quibusdam veniam, perspiciatis esse magnam, necessitatibus animi!</p>
<p>Ab sed enim eveniet quidem dolores laborum, officia delectus error amet blanditiis voluptatem minima vel sequi atque repellat repudiandae hic odit? Voluptatem quibusdam iure eius inventore deleniti iste labore rem impedit velit ex aliquid, quisquam recusandae voluptas atque dicta porro hic sit reprehenderit molestiae a id, veritatis sed rerum! Vel.</p>
<p>Perferendis rerum ea assumenda minima vitae dicta est, inventore tempora nemo placeat, sint temporibus, repellat at. Aliquam, odio minima atque ad velit saepe illum magni id a porro. Unde earum quod omnis quae molestiae facilis voluptate velit odio dolore? Enim voluptas magni explicabo facilis facere iste ipsum ratione quod unde.</p>
<p>Sunt cupiditate dicta, cum officia nisi eveniet autem, fugiat error quidem sit quos architecto. Eveniet architecto accusamus soluta labore! Tempora ratione nisi distinctio. Culpa praesentium debitis iusto quasi recusandae molestias reiciendis obcaecati provident ullam quisquam! Vitae dolor, sunt odio quis facere fuga amet debitis enim error exercitationem quas ad repellendus!</p>
<p>Aut praesentium soluta voluptas quidem ipsam ex totam ea a aperiam itaque, earum excepturi. Ipsa voluptas a, quos odio facilis vel sunt consequuntur. Maiores voluptate placeat eos enim distinctio magnam, fuga dolore in vel architecto delectus deserunt velit praesentium sequi repudiandae voluptatibus unde aliquam assumenda eius optio eligendi facere dignissimos?</p>
<p>Molestias, labore beatae? Minima possimus inventore animi harum voluptate, quos quis eum debitis autem ut officia repudiandae libero provident corrupti! Fugiat adipisci accusantium expedita enim non nesciunt aperiam sapiente, natus ipsum quos eveniet repudiandae veniam dolorum ex debitis, modi aliquid, porro saepe maxime impedit explicabo deserunt molestias. Dolorem, in animi.</p>
<p>Laudantium temporibus eius, obcaecati natus modi quas provident deserunt deleniti, velit accusantium vitae ipsa excepturi! Similique corporis quam vel, porro ut possimus, quaerat vero ipsum et, expedita sapiente nihil ad in itaque ducimus libero sunt dolorem asperiores. Laboriosam eius quas officia odit itaque sed? Ullam iste placeat aliquid et. Nobis!</p>
<p>Commodi ad incidunt sunt? Nisi reprehenderit possimus doloremque vero praesentium enim velit aut, officiis voluptas vel numquam amet corporis ad sint delectus voluptatum consectetur aperiam? Iste eius, nobis consequuntur laborum omnis possimus accusantium nam, earum illo quasi molestiae numquam obcaecati ut, blanditiis aut magnam animi aperiam tempore. Aspernatur, tempora animi.</p>
<p>Cupiditate id, quibusdam eum est hic ipsa! Asperiores minus porro, sit id reprehenderit delectus sint quas voluptatibus voluptas, voluptate aut hic! Ad veniam aliquam modi eos quo placeat praesentium repudiandae culpa ullam iusto. Voluptatem aut qui maxime quos tempore! Eum libero labore a voluptas necessitatibus provident eligendi ea saepe aspernatur.</p>
<p>Aliquid ab quasi quisquam rerum excepturi! Modi odit velit repudiandae laborum. Laborum, in quae. Voluptas accusamus id eligendi, at ullam veniam voluptates ab consectetur. Error, non. Maiores sint dolor deserunt blanditiis modi alias optio dolores minus et earum esse, quidem beatae quasi eum ea suscipit asperiores iure maxime. Itaque, a.</p>
</main>
</body>
</html>
Coding Video
Comment
