Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"lang"
Bootstrap 3.0.0 Snippet by
evarevirus
3.0.0
Preview
HTML
View Full Screen
Fork
Fork this
1.3K
 
0 Fav
Post to Facebook
Tweet this
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/alecspopa/pen/wqxAe?limit=all&page=13&q=Customisable" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <style class="cp-pen-styles">body { font-family: 'Open Sans', sans-serif; font-size: 14px; padding: 100px 0; text-align: center; } .wrap { display: inline-block; text-align: center; } .radio { position: absolute; left: -999rem; } .rd-visual { position: relative; display: inline-block; cursor: pointer; opacity: 0.4; width: 84px; height: 44px; padding: 84px 5px 5px; border-radius: 3px; overflow: hidden; vertical-align: bottom; } .radio:checked + .rd-visual { opacity: 1; color: #fff; background-color: #5cbc90; } .rd-visual::before { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); filter: gray; } .rd-visual:hover { opacity: 1; } .rd-visual:hover::before { -webkit-filter: grayscale(0); -moz-filter: grayscale(0); filter: grayscale(0); filter: none; } .radio:checked + .rd-visual::before { -webkit-filter: grayscale(0); -moz-filter: grayscale(0); filter: grayscale(0); filter: none; } .rd-visual::before { content: ""; position: absolute; top: 20px; left: 0; right: 0; margin: 0 auto; width: 54px; height: 54px; } .radio:checked + .rd-visual::after { content: ""; position: absolute; top: 12px; right: 12px; width: 25px; height: 25px; } .rd-visual.us::before { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAYAAACMRWrdAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpCOTJBMDUwQTEyMjA2ODExODA4M0E2QzFCM0EwRkMxNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3QkMzMTA3QTA3N0IxMUUzQUZFQkEwNkRGMjRGQjNENiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3QkMzMTA3OTA3N0IxMUUzQUZFQkEwNkRGMjRGQjNENiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RDgwMDA4QzYxOTIwNjgxMTgwODNFNkZENTk3MEMwNUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjkyQTA1MEExMjIwNjgxMTgwODNBNkMxQjNBMEZDMTQiLz4gPC9yZGY6RGVzY3Jp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); } .rd-visual.nl::before { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAYAAACMRWrdAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpCOTJBMDUwQTEyMjA2ODExODA4M0E2QzFCM0EwRkMxNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3QkMzMTA3RTA3N0IxMUUzQUZFQkEwNkRGMjRGQjNENiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3QkMzMTA3RDA3N0IxMUUzQUZFQkEwNkRGMjRGQjNENiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RDgwMDA4QzYxOTIwNjgxMTgwODNFNkZENTk3MEMwNUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjkyQTA1MEExMjIwNjgxMTgwODNBNkMxQjNBMEZDMTQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4lPozTAAAEE0lEQVR42tyaW2wMURjHvzO7rVpKpaoJQkWieJCKrUs9kUiIRlxC3IOIFxJvUkWIW/EoQngQt1Qi7omQ4BWhdWmwHmhc04jbVlu63d05/t/O2VjajZ3pru6cf/Lr7kx3dua/35nvnDPnE1JKSlS9X5AdqaMFXj15grweQSOxXQFKwSgwFPQD+cAD2sEX8B40gifgTlRSY7ukCM4e5a+1dxWd5e3m8XyhPjAOF7I8JGkenBancNwQPuavfU34jit4PQ0awE+yTDqScBgxNlQAZoNqFZ10KgBqwDXQ7MSg4eCkA8Bi8ACczIAp1hhwCtwHi9Q5M2aMo+RXJzwDRlDmxfdrLTgBxqtrSKuxPmAluAEq6f9rDrgOlql7Oi3G+oMt4DgopJ5TsWr61SrLdssYt+29YDNlj/hH3qOSl6N03xfsA+so+7SBMzqoAq12IpYLtmWpqbjWq+jlpmqMf4lVYBNlv6pUUhOpGJsAdpF7tBOUdYpO3YQ/tnk8dwHMIHeJu4KFoO13xIQKpIhFb4ELTbFmgbnw4In7+R0xg4rUEKaE3KlXoJxM+hZL9yIPXZWUnmhzcL6LTcWHX5Xe/gW1JERU3C/j20r6ZFtrA1lzKfdK0nOjT1+0QdEumk4d5FY5XRjGLdJBpjkVf+8KaZo8+jgK1pAeOgw28kQzD2/egiJNjH0Ew9gY58U60kvjue+aSvppiqFmprpprKHyv24qZWODNTQ2nJPHJ7wZqJmxL2wslGyy5mKF2ViEbDzWcok62FiLer6hVVPk5PFJw+TxmY2909DYW0NN0HTTCzb2UENjAW0HwfFpyxswSBNTTfyIwxto/BbpCJtXsbFWE2MXc3MMU5TNqRWCxDSSdFsLW0JUSJL3BBXt5y0f9fY2aDDSf0Y/o8gZMuSlQh+7DFF+7gGynn24WTXU0hHhUgZB5cesXabkET6vK5e41BT3x34yRJA3DBiiGERfwQ4XR2s7aIn7SVxtMTmjgJsuNMVlE5cpoWyiU52H8B/jDpsLSYa4xBSPdXnx/XHizq7Wx+rJWs10i7b+bSqZMRbXcex3gSle+D/b1T+SGQuD3eBIFps6pIyF7Rhj8Wo811QczlJTfLu0JfvAv+o8gspcTRaZ4hqPLerayKkxVrP6stU9/BiBFxtWqub3/V8fTrWWikPOdYQzwdUeMMXdD68zc8HYj1QOsFP9FlWz7VVg6X96pPCSrBJCbi2PyEbdopN6RV68PgcmqqYRyIChp2AFmATOq3Pam710MfKwc7yHhNEbv0853i8hq+LU6VrAB3DJ6pfMBpJmektnbRrDARx0A3NVw0vhoIfMEGYHYjJ2jlbzu+FklQbGS/G+q4T0QTVnREfeI6PXa8opwJTDjMZGsdLsVsh/CTAArgMXqPf+9qAAAAAASUVORK5CYII=); } .radio:checked + .rd-visual::after { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpCOTJBMDUwQTEyMjA2ODExODA4M0E2QzFCM0EwRkMxNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozOTBBMzc2RDA3N0QxMUUzQUZFQkEwNkRGMjRGQjNENiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozOTBBMzc2QzA3N0QxMUUzQUZFQkEwNkRGMjRGQjNENiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RDgwMDA4QzYxOTIwNjgxMTgwODNFNkZENTk3MEMwNUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjkyQTA1MEExMjIwNjgxMTgwODNBNkMxQjNBMEZDMTQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6EUwEaAAACaUlEQVR42rSW70tTURjHn7vNyVZDiJCkMkNtMpovNCOUIgsCGVoU9KIgohcRCRa+iegPSOjHi15Vf0SKRGIvgupVkFtrTAghkphz6ZxjzbnLtuP3ybux1rnbdVtf+MDlnHPP97nnnPs8RxFCUBlZwSA4D/rBQeAAERACc2AKvAeq7ixsIsEKxkFEGNNPcAOYZfPJDLqAX1QnL+ioZHICrInatAqO6ZnwF6yL+ugXaC814T34KuqrOWDh+U3a/t8BbqqvesBo/nTZwEq14WZzOfEy+FZ8WArKupd4lSzwGQF7qwk1k8vS8/lZ+hRZoI/heVKzGTp7oLt4SAvwsImnWoNngTfkW/2+vSL8h6bisqFDvCe9sp64ukEL8bDUgCN+4p8uGLBG2vroSudJ2fA+BWuWxIO9uHUt/ZsmvK8omk7Q3e5hcu9pLfRtZlV6/GWavq2HCm2X2/tpGCY6iplKDVgvgrMU3oj9ifgpIvZqESczaZhPFgwUcPXIqXIGrN3SL4luJmjCN0nLMGKZFRNdc56md6EALSZWtg0Uha47B+nM/oonP8YmQTy4ZHvyEEsWSkb/ecsEg5uuczSwr8vIGfHzcnllPU1WOz3ovURtjua/2i0mM40eHTJqwPrMJjN6vY4GG93vuUgdTS0FgzG3h443d+7ktM/wH2/XMqeuUhlVPPJNiUB0cacJYRk05hPkPfF/NF6chRv5ANTZgAtfQ2k9cdWxnnDhc+pVxoFaMrKmSLnKmOdwjTW+1chFIl8pb2unw4i4btzKV8JSlAr3Lhu4wOlay9aHwC5OY+CHdu96rZHSm2RLgAEArjdGkksKS7AAAAAASUVORK5CYII=); }</style></head><body> <form> <label class="wrap"> <input type="radio" name="city" class="radio" checked="checked"/> <span class="rd-visual us" title="New York">New York</span> </label> <label class="wrap"> <input type="radio" name="city" class="radio"/> <span class="rd-visual us" title="San Francisco">San Francisco</span> </label> <label class="wrap"> <input type="radio" name="city" class="radio"/> <span class="rd-visual nl" title="Amsterdam">Amsterdam</span> </label> </form> </body></html>
Related:
See More
Free Template
Vue Material Kit
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76