<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE html PUBLIC '-//W3C/DTD XHTML+Voice 1.2 /EN' 'http://www.voicexml.org/specs/multimodal/x+v/12/dtd/xhtml+voice12.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:ev='http://www.w3.org/2001/xml-events'>
<head>
<link rel='stylesheet' href='http://pabi3.com/modules/items/voice.css' type='text/css' media='all' />
<form xmlns='http://www.w3.org/2001/vxml' id='title'>
<block>
The article Pseudo-trieda checked is written by PaBi3
</block>
</form>
<form xmlns='http://www.w3.org/2001/vxml' id='body'>
<block>
Pseudo-trieda checked sluzi na stylovanie elementu pri jeho oznaceni "checked".
CSS kod je samozrejme urceny pre top prehliadace ako Opera a Firefox. V Opere
funguje tento kod najlepsie a vo Firefoxe vykazuje mensiu chybu, ktora sa
ale da uniest. Prehliadac Internet Explorer
ani nespominam, pretoze je nepozitelny.</block>
</form>
<form xmlns='http://www.w3.org/2001/vxml' id='full'>
<block>
CSS kod:

div#nice-check input[type=checkbox], input[type=checkbox] + span

{

background:red;

}



div#nice-check input[type=checkbox]:checked, input[type=checkbox]:checked + span

{

background:yellow;

}


XHTML kod:

&lt;div id='nice-check'&gt;

&lt;p&gt;&lt;input type='checkbox' checked='checked' /&gt;&lt;span&gt;Checkbox 1&lt;/span&gt;&lt;/p&gt;

&lt;p&gt;&lt;input type='checkbox' checked='checked' /&gt;&lt;span&gt;Checkbox 2&lt;/span&gt;&lt;/p&gt;

&lt;p&gt;&lt;input type='checkbox' /&gt;&lt;span&gt;Checkbox 3&lt;/span&gt;&lt;/p&gt;

&lt;/div&gt;


Firefox vs. Opera


firefox.png




opera.png




Firefox vykazuje chybu v tom, ze nevie vyfarbit vnutro elementu input (myslim typ checkbox).
Cely vysledok si mozete prezriet tu.</block>
</form>
<base href='http://pabi3.com/' />
<title>Pseudo-trieda checked</title>
</head>
<body ev:event='load' ev:handler='#title'>
<a href='http://pabi3.com/blog/pseudo-trieda-checked/' title='Návrat'>Návrat</a>
<h1 style='padding:0.5em;'>Pseudo-trieda checked</h1>
<ul>
<li ev:event='click' ev:handler='#body'>Speak introduction</li>
<li ev:event='click' ev:handler='#full'>Speak full</li>
</ul>
</body>
</html>
