month-picker - 2

css month-picker

by polinux

HTML

Now, let's have a look at the basic
<b class="month-picker">
    <input type="text" value="01/2014" id="mois" class="month-picker" />
    <span>
        <select>
            <option>2013</option>
            <option>2014</option>
            <option>2015</option>
            <option>2016</option>
            <option>2017</option>
            <option>2018</option>
            <option>2019</option>
            <option>2020</option>
            <option>2021</option>
            <option>2022</option>
        </select><br />
        <label>
            <input value="1" type="radio" name="mois" checked="" />
        <span>Jan</span>
        <label>
            <input value="2" type="radio" name="mois" checked="" />         
         <span>Fév</span>
       </label>
        <label>
            <input value="3" type="radio" name="mois" checked="" />         
          <span>Mar</span>
       </label>
        
        <button value="4">Avr</button>
        <button value="5">Mai</button>
        <button value="6">Juin</button><button value="7">Juil</button><button value="8">Août</button><button value="9">Sept</button><button value="10">Oct</button><button value="11">Nov</button><button value="12">Déc</button>
        </span></b>

CSS

b.month-picker {
    position:relative; /*this is the key*/
    z-index:24; background-color:#ccc;
    color:#000;
    text-decoration:none
}

input.month-picker  {
    width:6em;
    text-align:center;
}

input.month-picker + span {
	display: none
}

input.month-picker + span button {
    text-align:center;
width: 3em; height: 2em;
}

input.month-picker.focus + span, 
input.month-picker:focus + span, 
input.month-picker + span:hover{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    width:200px;
    top:2em;
    left:-.8em;
    border:1px solid #0cf;
    background-color:#cff; color:#000;
    text-align: center
}

input[type=radio] {
    opacity:0;
}
input[type=radio]+span {
 border: 1px solid #D3D300;
    color: #333;
    font-weight: normal;
    opacity:.5;
    display:inline-block;
    width:32px;
}


input[type=radio]:checked+span {
    opacity:1;
}