文本字段样式：iOS 样式
我想制作自己的 WebApp 进行测试，这样当我有一些重要的事情要做时我就会知道该怎么做。我找到了一些关于使用 HTML、CSS 和 Javascript 使 Web 应用程序看起来像真正的 iOS 的信息，但让我烦恼的一件事是让文本字段看起来像 iOS 使用的或至少相似以及如何制作它横跨整个屏幕（宽度），但左右有一些边距......好吧，所以它看起来很漂亮很自然。
我很欣赏每一个答案。
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您可以尝试的一种选择是查看 Appcelerator Titanium，它可以让您开发 iPhone/iPad/Android（甚至 Mac/仅使用 HTML/CSS/JavaScript 的 PC）应用程序。它允许您利用本机 UI 元素，包括表单、列表、按钮等...
如果您正在考虑开发移动应用程序，这是一个非常酷的工具（特别是如果您不是 Object-C）威兹）。
使用 Titanium 的工具的一个示例是 WunderList 待办事项应用程序。
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.
我会使用 jquerymobile 或 sencha touch...取决于您是否熟悉 ExtJS。这样你就可以专注于添加内容，而不是永远用 CSS 来尝试和模拟最终会被 iOS 取代的东西。
http://jquerymobile.com/
http://dev.sencha.com/deploy/touch/examples/kitchensink/
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/
您可以使用
-webkit-border-imageCSS 属性来执行此操作。即使您使用某种框架可以为您完成所有这些工作，了解它是如何在幕后实现的总是很高兴，因为它总是可以在其他地方重新应用。参考： http://css-infos.net/property/-webkit-border-image
You can do so using the
-webkit-border-imageCSS 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