Html iOS上的引导CSS问题

Html iOS上的引导CSS问题,html,ios,css,twitter-bootstrap,Html,Ios,Css,Twitter Bootstrap,我有以下引导HTML标记: <div> <form class="well" name="formTest"> <div class="form-group"> <label for="number">Text input</label> <input type="input" class="form-control" placeholder="Input f

我有以下引导HTML标记:

<div>
    <form class="well" name="formTest">
        <div class="form-group">
            <label for="number">Text input</label>
            <input type="input" class="form-control" placeholder="Input field text" />
        </div>
        <div class="form-group">
            <label for="number">Select</label>
            <select class="form-control">
                <option>Select field 1</option>
                <option>Select field 2</option>
            </select>
        </div>
        <div class="form-group">
            <label for="number">Select disabled</label>
            <select class="form-control" disabled>
                <option>Select field 1</option>
                <option>Select field 2</option>
            </select>
        </div>
    </form>
</div>

文本输入
挑选
选择字段1
选择字段2
选择禁用
选择字段1
选择字段2
在桌面上使用Chrome is的外观如下所示:

在iOS上看起来是这样的:

我在iOS上看到两个问题:

  • 不值得注意的是,最后一次选择被禁用
  • 选择框内的文本不再与上述输入中的文本垂直对齐
  • 如何解决这些问题


    请参见我的。

    每个浏览器的渲染方式都不同。你会看到IE通常使用“更简洁”的字体,你会看到很多表单元素在webkit/firefox/IE等之间表现不同。这没有什么不同

    简单的自定义类将以一种您感觉更舒服的方式重新设置下拉列表的样式。
    .form控件
    类控制大多数这些属性

    苹果解释了如何使用媒体查询只针对浏览器的外观:

    CSS

    不幸的是,右边的小箭头也消失了

    更新小提琴:

    select {
        -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none;
    }