2017-09-20 7 views
1

現在、生成されたHTMLページのCSSを変更しようとしています。このページでスクリプトを実行したり、ベースHTMLを変更するアクセス権がありません。フォーカスの入力に隣接していないラベルを変更するCSS

フォームが入力を持っていると私は通常、このような何か彼らのために浮動ラベル、作成しようとしています:生成しかし

input:focus + label { top: 100%; } 

:CSSで

<input id="email"> 
<label for="email">E-mail</label> 

をこのような何かをHTMLは次のように構成され、入力ブロックとエラーブロックの前のラベルは次の間にあります。

<label for="email">Email Address</label> 
<div aria-hidden="true" class="error itemLevel"> 
<p aria-live="polite" role="alert" tabindex="1">Please enter a valid email address.</p> 
<input aria-required="true" id="email" title="Email address that can be used to contact you." type="text"> 

純粋なCSSでラベルをどのようにターゲティングしますか?

+0

あなたは純粋なCSSの前の兄弟をターゲットに探していますか?これは不可能です - [この質問と関連する回答を参照](https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector) – PTD

+0

ありがとうございました。以前の兄弟の選択を可能にする仕様への追加を参照してください。それがまだ追加されたのか、廃止されたのか分かりませんでした。 –

答えて

2

あなたは属性セレクタを使用することができます。

label[for="email"] { ... } 
+0

素晴らしい、ありがとう。すべての入力がIDが異なるこのような場合はどうなりますか? –

+0

私はあなたが最後に何を望んでいるのかまだ分かりません。彼らは異なるIDを持っている必要があります。あなたはすべての 'for 'ラベルを個別に扱うことができますし、単に* all *ラベルを' label'として扱うこともできます。 – Johannes

+0

それらはすべて親divにありましたので、実際に '.parentClass:focus-within label { } ' –

関連する問題