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
Kako formatirati radio/checkbox imput kontrole?