在 iPad 上 HTML 搜索输入和 HTML 文本区域宽度缩小答案

【问题标题】：HTML search input, and HTML textarea width shrinks on iPad在 iPad 上 HTML 搜索输入和 HTML 文本区域宽度缩小
【发布时间】：2014-06-11 16:04:09
【问题描述】：

我正在为此使用 Bootstrap 3 和 AngularJs。我这样做是为了输入type='search'：

<input type="search" class="form-control" id='roomSearch' placeholder="Search" ng-model='qText'>

这对于文本区域：

<textarea name='question' id='question' rows='8' ng-model='q.text' class='form-control' ng-maxlength='{{$root.globals.maxLen.med}}' required></textarea>

不过，它在 iPhone 和桌面上的所有主要浏览器中看起来都不错； iPad 是这样渲染这些字段的：

这里

更新！这是搜索框的 CSS

     #roomSearch {
       margin-top: 8px;
       float: right;
     }

这是文本区域的css

       .question-form textarea {
       width: 100%;
      }

【问题讨论】：

标签： html css angularjs twitter-bootstrap

【解决方案1】：

我没有看到答案，而且这是旧的，所以我猜作者想通了，但这对我有用：

textarea, input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
 }

这使得 textarea 和 input 填满了浏览器的整个宽度。

【讨论】：