Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.

Kako formatirati radio/checkbox imput kontrole?

[es] :: Web dizajn i CSS :: Kako formatirati radio/checkbox imput kontrole?

[ Pregleda: 2315 | Odgovora: 3 ] > FB > Twit

Postavi temu Odgovori

Autor

Pretraga teme: Traži
Markiranje Štampanje RSS

EmmaR
Srbija

Član broj: 269847
Poruke: 466



+172 Profil

icon Kako formatirati radio/checkbox imput kontrole?15.06.2015. u 10:10 - pre 87 meseci
Već par dana se umorih pokušavajući da formatiram checkbox kontrolu: dinamimčka promena veličine (JavaScript/jQuery, treba da prati okolni sadržaj) i promena boje (ovo se kasnije ne menja).
Jedino što sam pronašla za promenu veličine jeste:
Code:
/*CSS*/ transform: scale(n,m);

a za promenu boje i velilčine korišćenje slika umesto checkbox/radio kontrola, što pokušavam da izbegnem.
Postoji li neki drugi način?
ER
 
Odgovor na temu

EmmaR
Srbija

Član broj: 269847
Poruke: 466



+172 Profil

icon Re: Kako formatirati radio/checkbox imput kontrole?17.06.2015. u 14:41 - pre 87 meseci
Citat:
EmmaR: Već par dana se umorih pokušavajući da formatiram checkbox kontrolu: dinamimčka promena veličine (JavaScript/jQuery, treba da prati okolni sadržaj) i promena boje (ovo se kasnije ne menja).
Jedino što sam pronašla za promenu veličine jeste:
Code:
/*CSS*/ transform: scale(n,m);

a za promenu boje i velilčine korišćenje slika umesto checkbox/radio kontrola, što pokušavam da izbegnem.
Postoji li neki drugi način?




Nasla sam:
Code:

<html><head>
<style>
input[type='checkbox'] { display: none; }
label {margin-right:20px}
label:before, input[type="checkbox"]+label:before { content: 'NE';
display: inline-block; padding-right: 10px; font-size: 18pt; font-weight: bold; color: red;
}
label.novoo:before, input[type="checkbox"]:checked+label:before  { content: 'DA'; color: pink; }
</style>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("label").click(function(){
        $(this).toggleClass("novoo");        
    });     
}); 
</script>
</head>
<body>
<h1>forma</h1>
<form id="forma">
<input type="checkbox" id="ch1" value="ch1" checked="checked" /><label id="l1" for="ch1" > Oznaka 1 </label>
<input type="checkbox" id="ch2" value="ch2"/><label id="l2" for="ch2"> Oznaka 2 </label>
</form>
</body></html>

Ovo je gruba verzija koja radi. Ali, ne i u IE8 jer ne podrzava CSS3 :checked

Na pragu sam resenja ali ne znam kako ovo da pravilno napisem:
Code:

$("input").each(function(){
        if(!$(this).attr("checked")) {
            $( this+label ).addClass("staro"); //probano: this+'label', '+label', 'this+label', this'+label'                    
        }
        else {
            $("label").addClass("novoo");
        }
});


Sta sada?

i, ovo sam resila:
Code:

//nacin 1
$("#"+$(this).attr("id")+"+label").addClass("cssclass");
//nacin 2
$(this).next("label").addClass("cssclass");


[Ovu poruku je menjao EmmaR dana 17.06.2015. u 16:18 GMT+1]
ER
 
Odgovor na temu

agvozden
Aleksandar Gvozden
founder
Info-G
Beograd

Član broj: 37813
Poruke: 1119
*.dynamic.sbb.rs.

Sajt: www.gvozden.info


+68 Profil

icon Re: Kako formatirati radio/checkbox imput kontrole?18.06.2015. u 09:54 - pre 87 meseci
probaj
$( 'label', this )
 
Odgovor na temu

EmmaR
Srbija

Član broj: 269847
Poruke: 466



+172 Profil

icon Re: Kako formatirati radio/checkbox imput kontrole?19.06.2015. u 20:22 - pre 87 meseci
Citat:
agvozden: probaj
$( 'label', this )


Ne, ovo radi ispravno samo u slucaju da ni jedno dugme nije unapred cekirano.
Mada, s druge strane, s obzirom da imam samo jedan checkbox koje nije default oznacen i ovo bi doslo u obzir. A ja ovo odbacila u startu: eto sta se desi kad me iznervira IE8, a bez njega i to samo primenom CSS-a savrseno je radilo.
ER
 
Odgovor na temu

[es] :: Web dizajn i CSS :: Kako formatirati radio/checkbox imput kontrole?

[ Pregleda: 2315 | Odgovora: 3 ] > FB > Twit

Postavi temu Odgovori

Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.