样式文本字段：iOS 样式答案

【问题标题】：Styling textfield: iOS style样式文本字段：iOS 样式
【发布时间】：2011-07-22 20:24:49
【问题描述】：

我想制作自己的 WebApp 进行测试，这样当我有一些严肃的事情要做时，我就会知道该怎么做。我发现了一些关于使用 HTML、CSS 和 Javascript 使 Web 应用程序看起来像真正的 iOS 的信息，但是让我心烦意乱的一件事是让文本字段看起来像 iOS 使用的或者至少类似于那个以及如何制作它横跨整个屏幕（宽度），但在左右两边有一些边距......很好，所以看起来很自然。

我感谢每一个答案。

【问题讨论】：

您能更具体地说明您指的是 iOS 中的哪个文本字段吗？你的意思是这样的：homepage.mac.com/madcran/IMG_0001.PNG

标签： iphone css ios text textfield

【解决方案1】：

您可以尝试的一个选项是查看Appcelerator Titanium，它可以让您仅使用 HTML/CSS/JavaScript 开发 iPhone/iPad/Android（甚至 Mac/PC）应用程序。它允许您利用原生 UI 元素，包括表单、列表、按钮等...

如果您正在考虑开发移动应用程序，这是一个非常酷的工具（尤其是如果您不是 Object-C 专家）。

使用 Titanium 的工具的一个示例是 WunderList 待办事项应用程序。

【讨论】：

我真的很喜欢 Appcelerator，它看起来棒极了！我试试看，谢谢;-)
是的，这很有趣，也是开始移动开发的好方法。享受吧！

【解决方案2】：

我会使用 jquerymobile 或 sencha touch... 取决于您是否熟悉 ExtJS。这样你就可以专注于添加你的内容，而不是永远用 CSS 来尝试模拟你最终会用 iOS 替换的东西。

http://jquerymobile.com/

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

【讨论】：

我查看了 sencha，还找到了这本书，用于开发 HTML、CSS 和 JS 应用程序，其中提到了 jqtouch，我比这两本书更喜欢它。但是我仍然会考虑这些，因为 Appcelerator Titanium 看起来仍然比所有这些都好...但是感谢您的提示 ;-)

【解决方案3】：

您可以使用-webkit-border-image CSS 属性来执行此操作。即使您正在使用某种框架来为您完成所有这些工作，了解它是如何实现的总是很高兴，因为它总是可以在其他地方重新应用。

参考：http://css-infos.net/property/-webkit-border-image

【讨论】：