Looking for a solution to customize & add images in select dropdown? Do you think it’s impossible to customize select dropdown without using plugin? No, You’re Wrong, it’s possible. You can use list (ul) to achieve this. You’re in the right article and here is the solution for you.
Are you fed up using boostrap modal box? you will be urged to use lot of css and jquery. Do you want to code your own popup modal box? Here is the perfect solution for you. This tutorial will help you to create overlay message popup box using CSS. HTML Snippet
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html> <head></head> <body> <div id="container"></div> <!-- popup should come just above body tag --> <div class="overlay-container"> <div class="black-overlay"></div> <div class="popup"> <h1>Hello!!!</h1> <p> Pure CSS overlay Message popup box </p> </div> </div> <!-- popup ends --> </body> </html> |
CSS Snippet
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | .overlay-container { display: block; width: 100%; height: 100%; position: fixed; top: 0; z-index: 10000; overflow: auto; } .black-overlay { display: block; position: fixed; top: 0%; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 999; } .overlay-container .popup { display: block; position: absolute; top: 50%; left: 50%; width: 80%; max-width: 600px; max-height: 400px; height: 80%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); padding: 10px; text-align: center; z-index: 1000; background-color: #fff; border: 2px dashed #c5c5c5; box-shadow: 0 0 0 7px #fff; } |
Normally, we have placeholder for input and textarea field. The placeholder will be in gray colored text when you start typing it will turn into black but what about select box? We don’t have any placeholder attribute for select dropdown. In this tutorial, I’ll show you how to create placeholder for select dropdown using jquery. We need, select dropdown Select value should be in gray color and option should be in black. First of all, create normal select box
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | //normal select box //HTML <select> <option value="">Select value</option> <option value="value 1">value 1</option> <option value="value 2">value 2</option> <option value="value 3">value 3</option> </select> //CSS select { color: #000; height:30px; width:200px; border:1px solid #ccc; font-size:14px; padding:0 10px; } |
Here, Select value and value 1, value 2.. everything will…read more
In this tutorial, am going to show you how to create html templates using twitter bootstrap. Demo This Twitter Bootstrap HTML template has : 3 types of Menus Banner image 4 types of Heading Style Footer with Scroll Top Button Download bootstrap here http://getbootstrap.com/ and extract it into your server or local. Bootstrap folder structure
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js ├── fonts/ | ├── glyphicons-halflings-regular.eot | ├── glyphicons-halflings-regular.svg | ├── glyphicons-halflings-regular.ttf | └── glyphicons-halflings-regular.woff ├── index.html ├── style.css |
Create index.html and style.css in bootstrap root folder. Index.html Add these code in <head> section
1 2 3 4 5 6 | <head> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> |
Add these code in <body> section For Fixed menu bar add these code next to <body> tag
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!--fixed menu bar starts--> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div class="navbar-collapse collapse"> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text" placeholder="Email" class="form-control"> </div> <div class="form-group"> <input type="password" placeholder="Password" class="form-control"> </div> <button type="submit" class="btn btn-success">Sign in</button> </form> </div><!--/.navbar-collapse --> </div> </div> <!--fixed menu bar ends--> |
Now the…read more
