Book Image

HTML5 iPhone Web Application Development

By : Alvin Crespo
Book Image

HTML5 iPhone Web Application Development

By: Alvin Crespo

Overview of this book

<p>Create compelling web applications specifically tailored for distribution on iOS Safari. Work through real world examples with references, and in-depth discussions on the approach; including its benefits and drawbacks.<br /><br />"HTML5 iPhone Web Application Development" strives to teach all levels of developers, beginners and professionals, the process of creating web applications for iOS Safari. Utilizing current industry standards for frontend development, learn to take advantage of HTML5, CSS3 and JavaScript to create compelling software.<br /><br />Start with reviewing current industry standards for frontend development, and end with creating a native application using the same codebase.</p> <p>Your journey will begin with an overview of current industry standards for frontend technology, quickly moving to solve real world issues; from creating a resizable or responsive gallery, to creating a single page application that utilizes the popular Backbone.js framework.</p> <p>"HTML5 iPhone Web Application Development" aims to make you an expert in developing web applications for the iOS Safari platform.</p>
Table of Contents (17 chapters)
HTML5 iPhone Web Application Development
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Form styling for iOS


In this section we look at styling our form. If we currently test out our form on an iOS device or even a desktop browser, it won't be pretty. In fact you might be a little upset at how ugly it really is. So, let's style it and make everyone happy. We'll start with basic styling that helps achieve a good look. Then we'll consider how we can customize our components using CSS3 features.

Basic styling

Styling forms is pretty easy. We can simply use the elements themselves, but there is a single "gotcha". You might notice the fact that we've specified [type="datetime"] in one of our selectors. This is because the datetime input type shows a select menu type of UI in iOS and thus, the typical input selector won't apply. Otherwise, there's not much to the basic styling that really pops out here, and it basically gives us the styles we've seen in the previous images when we discussed the input types used in our forms.

/*!
  Forms Styling
*/

label {
    color: #FFF;
    font...