Bij mijn weten bestaat er geen manier om de waarde van een attribuut te wijzigen via CSS. Javascript zou daarvoor wel een geschikte manier zijn.
Je kan de knop echter wel laten verdwijnen via CSS en er iets in de plaats voor zetten dat lijkt op een knop.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Disabled button with CSS</title>
<style type="text/css">
.telaat input {
display: none;
}
.telaat:after {
display: inline;
content: 'Unclickable';
padding: 10px;
background-color: #660000;
color: #FFFFFF;
}
</style>
</head>
<body>
<form><p><span class="telaat"><input type="submit" value="OK"></span></p></form>
</body>
</html>
:before en :after werken niet op een input-element dus <input type="submit" class="telaat" value="OK"> zal niet werken. Ze werken wel met button, maar dan blijft het ook werken als een submitbutton.
of iets simpeler:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Disabled button with CSS</title>
<style type="text/css">
input.telaat {
display: none;
}
input[disabled].telaat {
display: inline;
}
</style>
</head>
<body>
<form><p><input type="submit" value="OK" class="telaat" /><input type="submit" value="OK" disabled class="telaat" /></p></form>
</body>
</html>