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.
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...