Αλλαγή checkbox/radio buttons με css

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
mpempe
Δημοσιεύσεις: 156
Εγγραφή: 23 Ιουν 2003 02:48
Τοποθεσία: peloponisos

Αλλαγή checkbox/radio buttons με css

Δημοσίευση από mpempe » 09 Μαρ 2013 00:38

Βρήκα το παρακάτω css script που αντικαθηστά checkbox/radio buttons με εικόνες
http://webdesign.tutsplus.com/tutorials ... o-buttons/
Εδώ ένα demo
http://jsfiddle.net/pAYFa/118/

Απ ότι κατάλαβα το css αντικαθηστά όλα τα checkboxes και radio buttons
Πως θα μπορούσα να προσθέσω παρακάτω κι άλλα checkboxes και radio buttons χωρίς όμως να επιρεαστούν απο το script? Δοκίμασα να αναθέσω κάποια class στο css αλλα χωρίς επιτυχία.

Μπορεί να γίνει κάτι τέτοιο?

Ευχαριστώ

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6234
Εγγραφή: 30 Νοέμ 2004 03:09

Αλλαγή checkbox/radio buttons με css

Δημοσίευση από fafos » 09 Μαρ 2013 13:42

Profanos vazeis lathos thn class.. to parakato einai me ypothetikh class= test:

Κώδικας: Επιλογή όλων

input[type="checkbox"].test {
    display:none;
}

input[type="checkbox"].test + label {
    color:#f2f2f2;
    font-family:Arial, sans-serif;
    font-size:14px;
}

input[type="checkbox"].test + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

input[type="checkbox"].test:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

input[type="radio"].test {
    display:none;
}

input[type="radio"].test + label {
    color:#f2f2f2;
    font-family:Arial, sans-serif;
    font-size:14px;
}

input[type="radio"].test + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) -38px top no-repeat;
    cursor:pointer;
}

input[type="radio"].test:checked + label span {
    background:url(check_radio_sheet.png) -57px top no-repeat;
}
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

mpempe
Δημοσιεύσεις: 156
Εγγραφή: 23 Ιουν 2003 02:48
Τοποθεσία: peloponisos

Αλλαγή checkbox/radio buttons με css

Δημοσίευση από mpempe » 11 Μαρ 2013 14:06

Τέλεια
Ευχαριστώ πολύ

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης