3

私は多かれ少なかれ静的な CSS と HTML5 を含むプロジェクトに多くの JavaScript を使用して取り組んできました。

編集できない特定の入力要素を「フェードアウト」としてスタイル設定するために、次のスタイルを適用しました。

.input input[readonly], .input label[readonly] {
  color: #999;
}

これが適用される HTML は、次のような繰り返しブロックを含む単純な 2 列のフォーム レイアウトです。

<div>
    <span class="formcol">
        <div class="input">
            <label for="some_field">Some Field</label>
            <input id="some_field" type="text" />
        </div>
    </span>
    <span class="formcol right">
        <div class="input">
            <label for="some_other" readonly>Some Other Field</label>
            <input id="some_other" type="text" readonly />
        </div>
    </span>
</div>

ただし、ページを表示すると、ラベルが引き続き黒く表示されます。スタイルが入力ボックスに適切に適用されます。最も奇妙な点は、Chrome の開発ツールの Element Inspector でラベルを調べると、正しい色の値が表示されることです。bodyこれは、タグ全体のデフォルトの色を設定する別のスタイルシートを使用しているなど、他のスタイルシートを削除した場合にも当てはまります。ルールの color プロパティのチェックを外して再度チェックすると、色は適切に適用されますが、その 1 つの要素に対してのみ適用されます (同じスタイルの他のラベルには適用されません)。

これは Linux の Chrome 27.0.1453.93 で見られ、Windows の Chrome でも再現できます。私が実際に対象としている iPad Mini Safari ブラウザは、Firefox と同様に正しくレンダリングされます。簡単なjsFiddleの例で問題を再現しようとしましたが、Chromeで適切にレンダリングされました。

labelCSSには「前の兄弟」セレクターがないため、要素で「読み取り専用」が機能的にサポートされていないことを認識していることに注意してください。

他の誰かがこの奇妙な動作を見たことがありますか、または回避策を知っていますか? Element Inspector が正しいスタイルを報告するが、適切にレンダリングされないなどの競合を引き起こす可能性のある考えはありますか?

アップデート：

元のレンダリング動作はまだ奇妙だと思いますが、Zenith と BoltClock は、readonlyその動作をサポートしていない要素で使用することは、とにかく誤解を招く可能性が高いと指摘しています。いくつかの CSS クラスと readonly 属性を別々に追跡する必要があります。

4

2 に答える 2