Hello!
I'm trying to use iAd Producer to create a drawing widget for an iBooks project. So far, I've been able to customize the standard drawing object and it works flawlessly on the iAd Producer Preview and in Safari, but not on the iOS Simulator nor the iPad.
In the widget, there are 2 brush sizes available (small and large) and I'm trying to give visual feedback to the user, letting them know which one they selected. Initially I started with buttons but that didn't work because buttons don't have a style for on/off to let the user know that that button is selected.
I switched to radio buttons, which works great on the preview but not the actual device. Here's the code I'm using:
HTML:
<label class="brushFrame">
<input id="smallBrush" class="brush" type="radio" name="brush" value="small"><img src="assets/brush.png" />
</label>
<label class="brushFrame">
<input id="largeBrush" class="brush" type="radio" name="brush" value="large"><img src="assets/brush.png" />
</label>
CSS:
label.brushFrame > input.brush {
display:none;
}
label.brushFrame > input.brush + img {
cursor: pointer;
width: 50%;
height: auto;
position: relative;
z-index: 1;
transition: all 0.1s ease-in-out;
}
label.brushFrame > input.brush:checked + img {
opacity: 0.75 !important;
z-index: 10 !important;
}
Basically, the brush should become transparent when the user selects it and because it's a radio button, it will stay transparent until the user selects the other brush. The iOS Simulator and iPad are able to render all the CSS correctly, except for when the radio button is ":checked". Background: This is my first widget and I'm very comfortable with CSS but not JavaScript.
How can I make this work?
