Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   как применить css к подкласу disabled (https://javascript.ru/forum/xhtml-html-css/41924-kak-primenit-css-k-podklasu-disabled.html)

Vudik 04.10.2013 13:09

как применить css к подкласу disabled
 
Добрый день подскажите как применить css к подкласу disabled
есть checkbox с кнопкой надо применить свои css пример: когда не включен чекбокс кнопка белая, когда же включен кнопка желтая когда наведен курсор кнопка зеленая
<html>
<head>
<title></title>
<style type="text/css">
.disabled{background:#fff;}
.activ{background:#FFFF00;}
.activ a:hover {background:#00FF00;}

</style>
<script>
function a() {
if (document.getElementById("tb1").checked) {
document.getElementById("tbnum").disabled = false;
}
else {
document.getElementById("tbnum").disabled = true;
}
}
</script>
</head>
<body>
<input type="checkbox" value="asd" id="tb1" onClick="a()">
<input class="activ" type="button" value="Продолжить" id="tbnum" onclick="document.location='anketa.html'" />
<script>window.onload = a;</script>
</body>
</html>

BETEPAH 04.10.2013 13:30

Цитата:

Сообщение от Vudik
Добрый день подскажите как применить css к подкласу disabled

<html><head><title></title>
<style>
.disabled {background: #fff;}
.activ {background: #FFFF00;}
.activ:hover {background: #00FF00;}
</style>
<script>
function a() {
	if (document.getElementById("tb1").checked) {
		document.getElementById("tbnum").disabled = false;
		document.getElementById("tbnum").className = 'activ';
	} else {
		document.getElementById("tbnum").disabled = true;
		document.getElementById("tbnum").className = 'disabled';
	}
}
</script>
</head>
<body>
<input type="checkbox" value="asd" id="tb1" onClick="a()">
<input class="activ" type="button" value="Продолжить" id="tbnum" onclick="document.location='anketa.html'" />
<script>window.onload = a;</script>
</body></html>

Vudik 04.10.2013 13:35

Большое спасибо

danik.js 04.10.2013 13:54

Вы делаете это неправильно!
<!DOCTYPE html>
<style>
input[type="button"]{background: #FFFF00;}
input[type="button"]:hover {background: #00FF00;}
input[type="button"]:disabled {background: #fff;}
</style>
<form>
<input type="checkbox" value="asd" id="tb1" onclick="form.tbnum.disabled = !this.checked">
<input disabled="" type="button" value="Продолжить" name="tbnum" onclick="document.location='anketa.html'" />
</form>

Vudik 07.10.2013 13:53

Большое спасибо


Часовой пояс GMT +3, время: 03:24.