CODEWITHSUNDEEP
htmlioscsstwitter-bootstrap
dhrm
dhrm

Reputation: 14934

Bootstrap CSS issue on iOS

I've this Bootstrap HTML markup:

<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>

On desktop using Chrome is looks like this:

Chrome Desktop screenshot

and on iOS it looks like this:

iOS screenshot

I see two issues on iOS:

  1. It is not notable, that the last select is disabled
  2. The text inside the select is no longer aligned vertically with the in the above input.

How can I fix these issues?

See my JSFiddle.

Upvotes: 1

Views: 1720

Answers (2)

Thomas
Thomas

Reputation: 2367

For the appearance:

CSS

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

Unfortunately, the tiny arrow on the right also disappears.

Updated fiddle: http://jsfiddle.net/d79gtunm/3/

Upvotes: 1

bpeterson76
bpeterson76

Reputation: 12870

Every browser renders differently. You'll see IE generally uses a "crisper" font, you'll see many form elements behave differently between webkit/firefox/ie, etc. This is no different.

Simple custom classes will re-style the dropdowns in a manner you feel more comfortable with. The .form-control class controls most of those attributes.

Apple explains how to use media queries to target their browsers only here

Upvotes: 0

Related Questions