Card Input Layout

Select cards from an overlay

by subskybox

HTML

<div class="playingCards twoColours">
<ul class="table">
<li>
    <label for="c-2D" class="card rank-2 diams">
        <span class="rank">2</span><span class="suit">&diams;</span>
        <input type="checkbox" class="checkbox" name="2♦" id="c-2D" value="select" />
    </label>
</li>
<li>
    <label for="c-3D" class="card rank-3 diams">
        <span class="rank">3</span><span class="suit">&diams;</span>
        <input type="checkbox" name="3♦" id="c-3D" value="select" />
    </label>
</li>
<li>
    <label for="c-4D" class="card rank-4 diams">
        <span class="rank">4</span><span class="suit">&diams;</span>
        <input type="checkbox" name="4♦" id="c-4D" value="select" />
    </label>
</li>
<li>
    <label for="c-5D" class="card rank-5 diams">
        <span class="rank">5</span><span class="suit">&diams;</span>
        <input type="checkbox" name="5♦" id="c-5D" value="select" />
    </label>
</li>
<li>
    <label for="c-6D" class="card rank-6 diams">
        <span class="rank">6</span><span class="suit">&diams;</span>
        <input type="checkbox" name="6♦" id="c-6D" value="select" />
    </label>
</li>
<li>
    <label for="c-7D" class="card rank-7 diams">
        <span class="rank">7</span><span class="suit">&diams;</span>
        <input type="checkbox" name="7♦" id="c-7D" value="select" />
    </label>
</li>
<li>
    <label for="c-8D" class="card rank-8 diams">
        <span class="rank">8</span><span class="suit">&diams;</span>
        <input type="checkbox" name="8♦" id="c-8D" value="select" />
    </label>
</li>
<li>
    <label for="c-9D" class="card rank-9 diams">
        <span class="rank">9</span><span class="suit">&diams;</span>
        <input type="checkbox" name="9♦" id="c-9D" value="select" />
    </label>
</li>
<li>
    <label for="c-10D" class="card rank-10 diams">
        <span class="rank">10</span><span class="suit">&diams;</span>
        <input type="checkbox" name="10♦" id="c-10D" value="select" />
    </label>
</li>
<li>
    <label...

CSS

/**
 * Styles for CSS Playing Cards
 *
 * @author   Anika Henke <[email protected]>
 * @license  CC BY-SA [http://creativecommons.org/licenses/by-sa/3.0]
 * @version  2011-06-14
 * @link     http://selfthinker.github.com/CSS-Playing-Cards/
 */

/* card itself
********************************************************************/

.playingCards .card {
    display: inline-block;
    width: 3.3em;
    height: 4.6em;
    border: 1px solid #666;
    border-radius: .3em;
    -moz-border-radius: .3em;
    -webkit-border-radius: .3em;
    -khtml-border-radius: .3em;
    padding: .25em;
    margin: 0 .5em .5em 0;
    text-align: center;
    font-size: 0.8em; /* @change: adjust this value to make bigger or smaller cards */
    font-weight: normal;
    font-family: Arial, sans-serif;
    position: relative;
    background-color: #fff;
    -moz-box-shadow: .2em .2em .5em #333;
    -webkit-box-shadow: .2em .2em .5em #333;
    box-shadow: .2em .2em .5em #333;
}

.playingCards a.card {
    text-decoration: none;
}
/* selected and hover state */
.playingCards a.card:hover, .playingCards a.card:active, .playingCards a.card:focus,
.playingCards label.card:hover,
.playingCards strong .card {
    bottom: 1px;
}
.playingCards label.card {
    cursor: pointer;
}

.playingCards .card.back {
    text-indent: -4000px;
    background-color: #ccc;
    background-repeat: repeat;
    background-image: url(data:image/gif;base64,R0lGODlhJAAkAJEAAOjFsezdztOKbL5QKCH5BAAAAAAALAAAAAAkACQAAAL/HC4RAqm/mmLHyHmAbczB11Ea8ombJKSgKo6Z17pXFznmS1JptiX0z3vVhpEKDoUIkoa0olGIUeZUk1RI6Yn2mh/FDAt6frOrRRTqXPpsVLYugzxaVy+YcBdnoWPZOT0E4eckQtZFZBjWoHixQFWl6Nhol6R2p1Okt5TGaEWZA6fjiMdhZgPHeWrTWGVq+jTZg1HYyAEWKLYzmyiGKoUimilz+YYryyTlg5RcDJSAbNx0Q7lMcbIGEyzTK8zVdfVaImzs/QV+prYqWWW2ObkoOApM/Em/rUlIm7fijs8a2EEKEaZ3AsMUgneEU6RcpJbZ27aGHkAO2Ors8xQH1IR0Bn5YnOtVAAA7); /* image is "Pattern 069" from http://www.squidfingers.com/patterns/ */
    background-image: -moz-repeating-linear-gradient(34% 6% 135deg,#0F1E59, #75A1BF,...

JavaScript

//var selectedCards = [];

$("input[type='checkbox']").change(function() {
    selectedCards = $('input[type="checkbox"]:checked').map(function() { return this.name; }).get();
    alert(selectedCards);
});