iPhoneブラウザで<select>が使えない

Question

Iphoneでのみ起こる現象です。
HTMLの<Select>で、初期状態（selected）から他の<Option>を選択出来ない問題です。

HTML構文の問題かと思い、<label>や<div>の入れ替え・削除など試しましたが、うまく解決できませんでした。

label.label {
	text-align: left;
}
span.title {
	width: 50px;
	display: inline-block;
}
input[type="date"].date {
	width: 120px !important;
	padding: 4px 10px;
}
select.common {
	border: 1px solid gray;
	border-radius: 3px;
	padding: 4px 10px;
}
select.line {
	width: 90px;
}

<div>
    <label class="label">
      <span class="title">
        日付
      </span>
      <input class="date common" name="date" value="2018-03-01" min="2016-01-01" max="2018-03-01" type="date">
      <select id="id" name="line" class="line common">
          <option value="A">甲</option>
          <option value="B">乙</option>
          <option value="C" selected>丙</option>
          <option value="D">丁</option>
      </select>
    </label>
</div>

ちなみにFireFoxのF12開発者ツールで携帯端末サイズに変換すると不具合が再現されました。
Chromeの同機能では再現されませんでした。

よろしくお願いします。

Answer 1

HTML側ですが<label>タグを削除したところ、<select>の部分で選択できるようになりました。

編集・追記(21:22)
自分もあんまりHTMLの仕様に詳しくないのですが <label>タグの使い方が間違ってる気がします．．．

調べてみましたところ、一つの<label>に複数のコントロールを含めることについて動作が未定義かと思いますので、iPhoneのSafariでは想定した動作をしていないのだと思います。

4.10.4. The label element
https://www.w3.org/TR/html5/sec-forms.html#the-label-element