Styling of text inputs in iBooks widgets

1

I have recently switched from iAd Producer to Hype to make iBooks widgets because iAd Producer is no longer supported and becoming increasingly buggy.

I am having a problem with the styling of text input fields. They look fine when I preview them on the browser, but when I export a widget and put it in an iBook and view it on an iPad, there is some unwanted styling along the top of the input fields. I can’t figure out how to get rid of it. Can anyone help? I have attached my test file as an example.

inputFields.hype.zip (56.7 KB)

2

I figured it out. It seems that the iPad automatically adds a shadow across the top of all input fields, whether in an iBook or in a browser. (However, it doesn’t do this in iBook widgets created in iAd Producer, which is why I was thrown by this when I started using Hype.) Anyway, I learned after a little searching that I could prevent the unwanted styling by adding this css:

.answerBox {
-webkit-appearance: none;
 box-sizing: border-box;
}

Also, I figured out that you have to add the class in the innerHTML code editor on the object itself, and not using the “Identity” section of the inspector panel.

I’ve attached an example in case anyone is interested.

TextEntryB.hype.zip (58.8 KB)

2 Likes
3

You might be interested in a reset CSS which will handle these weird cases: https://gist.github.com/anthonyshort/552543

You can place this in the Head of your document to handle things like this.

1 Like
4

Thanks a lot. That’s very helpful.