Posts

Showing posts from April, 2016

jQuery Datepicker close datepicker after selected date

-
HTML <div class = "container" > <div class = "hero-unit" > <input type = "text" class = "dp" placeholder = "click to show datepicker" id = "example1" > </div> </div> jQuery (alternativ way) $ ( document ). ready ( function () { $ ( '#example1' ). datepicker ({ format : "dd/mm/yyyy" }); $ ( '.dp' ). on ( 'change' , function (){ $ ( '.datepicker' ). hide (); }); }); this is all you have to do :) HERE IS A FIDDLE to see whats happening.
Post a Comment
Read more

Style a Select Box Using Only CSS

-
Image
I often have to use a select box when I’m putting together a custom form that requires a drop down list. It took me a while to figure out how to easily style the select box using only CSS since certain parts are browser specific, such as the drop down arrow. Here is how a select box will look by default: This is the HTML code: <select> <option> Here is the first option </option> <option> The second option </option> </select> There are certain elements of a select box that we can style such as the font, border, color, padding and background color: But that annoying drop down arrow always stays the same. There is no direct way to do style it, but the workaround is pretty simple. First we need to surround our select box element with a div container: <div class = "styled-select" > <select> <option> Here is the first option </option> <option> The second option </
Post a Comment
Read more

HTML: how to style 2 tables with different CSS

-
32 down vote accepted In your html <table class = "table1" > <tr> <td> ... </table> <table class = "table2" > <tr> <td> ... </table> In your css: table . table1 {...} table . table1 tr {...} table . table1 td {...} table . table2 {...} table . table2 tr {...} table . table2 td {...}
Post a Comment
Read more

hide dropdown arrow of a select element and display some image

-
//select with hidden arrow select { - moz - appearance : none ; text - indent : 0.01px ; text - overflow : '' ; }   //select with image on right side   select { -moz-appearance: none; width: 100%; padding: 5px 10px; height: 34px; overflow: hidden; background: url(images/timer.png) no-repeat right #fff; border: 1px solid #ccc; }
Post a Comment
Read more

Responsive css table

-
Image
  demo here : http://codepen.io/anon/pen/QwPVNW code here :   index.php <!DOCTYPE html> <html >   <head>     <meta charset="UTF-8">     <title>Responsive table</title>            <link rel="stylesheet" href="css/style.css">   </head>  <body>     <table>   <thead>     <tr>       <th>Payment</th>       <th>Issue Date</th>       <th>Amount</th>       <th>Period</th>       <th>Issue Date</th>       <th>Amount</th>       <th>Period</th>     </tr>   </thead>   <tbody>     <tr>       <td data-label="Payment">Payment #1</td>       <td data-label="Issue Date">02/01/2015</td>       <td data-label="Amount">$2,311</td>       <td data-label="Period">01/01/2015 - 01/31/2015</td>        <td
Post a Comment
Read more