Styling textfield: iOS style

I wanted to make my开发者_运维百科 own WebApp for testing so I will know what to do when I've got some serious stuff to do. I found some info about using HTML, CSS and Javascript to make the web app look like real iOS but one thing that bugs my mind is hot to make the textfield look like the one iOS uses or at least similar to that and how to make it across the whole screen (width) but with some margins on the left and right... well so it looks nice and naturally.

I appreciate every single answer.

One option you could try is checking out Appcelerator Titanium which let's you develop iPhone/iPad/Android (and even Mac/PC) applications using just HTML/CSS/JavaScript. It allows you to utilize the native UI elements, including forms, lists, buttons, etc...

If you're thinking of developing mobile apps, this is a pretty cool tool to use (especially if you're not a Object-C wizz).

One example of a tool that uses Titanium is WunderList to-do application.

I'd use jquerymobile or sencha touch... depending on whether you're familiar with ExtJS or not. That way you can focus on adding in your content, not messing around with CSS forever to try and simulate something you'll replace with iOS eventually anyway.

http://jquerymobile.com/

http://dev.sencha.com/deploy/touch/examples/kitchensink/

You can do so using the -webkit-border-image CSS property. Even if you're using some kind of framework that does all that stuff for you, it's always nice to know how it's achieved under the hood, as it's always re-applicable somewhere else.

Ref: http://css-infos.net/property/-webkit-border-image